Maison > interface Web > js tutoriel > le corps du texte

JS réalise des stores de pages Web verticales vertes et blanches, commutation d'animation, compétences effect_javascript

WBOY
Libérer: 2016-05-16 16:11:50
original
1139 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation js de l'effet de commutation d'animation d'obturateur de page Web vertical vert et blanc. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Plus tôt, nous avons expliqué un effet d'animation de changement d'obturateur de page Web, mais c'est un obturateur horizontal, c'est un obturateur vertical, le code est fondamentalement le même :

Copier le code Le code est le suivant :


Effet de changement de page des stores



class="intro">
id="i6" class="intro">


var vitesse=20
var temp=nouveau tableau()
var temp2=nouveau tableau()
si (document.layers){
pour (i=1;i<=8;i ){
temp[i]=eval("document.i" i ".clip")
temp2[i]=eval("document.i" i)
temp[i].width=window.innerWidth/8-0.3
temp[i].height=window.innerHeight
temp2[i].left=(i-1)*temp[i].width
>
>
sinon si (document.all){
var clipbottom=document.body.offsetHeight,cliptop=0
pour (i=1;i<=8;i ){
temp[i]=eval("document.all.i" i ".style")
temp[i].width=document.body.clientWidth/8
temp[i].height=document.body.offsetHeight
temp[i].left=(i-1)*parseInt(temp[i].width)
>
>
fonction openit(){
window.scrollTo(0,0)
si (document.layers){
pour (i=1;i<=8;i=i 2)
temp[i].bottom-=vitesse
pour (i=2;i<=8;i=i 2)
temp[i].top =vitesse
if (temp[2].top>window.innerHeight)
clearInterval(stopit)
>
sinon si (document.all){
clipbottom-=vitesse
pour (i=1;i<=8;i=i 2){
temp[i].clip="rect(0 auto " clipbottom " 0)"
>
cliptop = vitesse
pour (i=2;i<=8;i=i 2){
temp[i].clip="rect(" cliptop " auto auto)"
>
si (clipbottom<=0)
clearInterval(stopit)
>
>
fonction gogo(){
stopit=setInterval("openit()",100)
>
gogo()


J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!