suchen

Heim >Web-Frontend >js-Tutorial >JS-Code-Zusammenfassung für nahtloses Scrollen von Bildern_Javascript-Fähigkeiten

JS-Code-Zusammenfassung für nahtloses Scrollen von Bildern_Javascript-Fähigkeiten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 16:40:511418Durchsuche

In diesem Artikel wird gängiger JavaScript-Code für das Scrollen von Bildern zusammengestellt und zusammengefasst, der den Effekt eines nahtlosen Scrollens in vier Richtungen erzielen kann: nach oben, unten, links und rechts. Dies ist ein häufig verwendeter Bildeffekt im Front-End-Design und in der Entwicklung . Sie können nur einen davon verwenden.

Der spezifische Beispielcode lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<title>图片滚动代码合集</title>
<script type="text/javascript">
// 自动滚动
function boxmove(d1,d2,d3,e,obj){
 var speed=30;
 var demo=document.getElementById(d1);
 var demo1=document.getElementById(d2);
 var demo2=document.getElementById(d3);
 demo2.innerHTML=demo1.innerHTML;
 function boxTop(){
   if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight}
   else{demo.scrollTop++}
  }
 function boxRight(){
   if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth}
   else{demo.scrollLeft--}
  }
 function boxBottom(){
   if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight}
   else{demo.scrollTop--}
  }
 function boxLeft(){
   if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}
   else{demo.scrollLeft++}
  }
 if(e==1){
   var MoveTop=setInterval(boxTop,speed);
   demo.onmouseover=function(){clearInterval(MoveTop);}
   demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)}
  }
 if(e==2){
   var MoveRight=setInterval(boxRight,speed);
   demo.onmouseover=function(){clearInterval(MoveRight)}
   demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)}
  }
 if(e==3){
   var MoveBottom=setInterval(boxBottom,speed);
   demo.onmouseover=function(){clearInterval(MoveBottom);}
   demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)}
  }
 if(e==4){
   var MoveLeft=setInterval(boxLeft,speed)
   demo.onmouseover=function(){clearInterval(MoveLeft)}
   demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)}
  }
 if(e=="top"){
   MoveTop=setInterval(boxTop,speed)
   obj.onmouseout=function(){clearInterval(MoveTop);}
  }
 if(e=="right"){
   MoveRight=setInterval(boxRight,speed)
   obj.onmouseout=function(){clearInterval(MoveRight);}
  }
 if(e=="bottom"){
   MoveBottom=setInterval(boxBottom,speed)
   obj.onmouseout=function(){clearInterval(MoveBottom);}
  }
 if(e=="left"){
   MoveLeft=setInterval(boxLeft,speed)
   obj.onmouseout=function(){clearInterval(MoveLeft);}
  }
 }
</script>
<style type="text/css">
div#a,div#b,div#c,div#d { float:left;}
h2 { clear:both; }
div#b,div#d,div#bb { white-space:nowrap; }
</style>
</head>
<body>
<h1>滚动合集</h1>
<hr />
<h2>向上</h2>
<div id="a" style="overflow:hidden;height:100px;width:90px;">
<div id="a1">
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif1"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif2"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif3"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif4"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif5"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif6"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif7"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif8"  class="lazy" alt="" />
</div>
<div id="a2"></div>
</div>
<script type="text/javascript">
boxmove("a","a1","a2",1);
</script>
<h2>向右</h2>
<div id="b" style="overflow:hidden;height:100px;width:90px;">
<div id="b1">
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif1"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif2"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif3"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif4"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif5"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif6"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif7"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif8"  class="lazy" alt="" />
</div>
<div id="b2"></div>
</div>
<script type="text/javascript">
boxmove("b","b1","b2",2);
</script>
<h2>向下</h2>
<div id="c" style="overflow:hidden;height:100px;width:90px;">
<div id="c1">
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif1"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif2"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif3"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif4"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif5"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif6"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif7"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif8"  class="lazy" alt="" />
</div>
<div id="c2"></div>
</div>
<script type="text/javascript">
boxmove("c","c1","c2",3);
</script>
<h2>向左</h2>
<div id="d" style="overflow:hidden;height:100px;width:90px;">
<div id="d1">
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif1"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif2"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif3"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif4"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif5"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif6"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif7"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif8"  class="lazy" alt="" />
</div>
<div id="d2"></div>
</div>
<script type="text/javascript">
boxmove("d","d1","d2",4);
</script>
<h2>手动滚动 - <strong onmouseover="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong onmouseover="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2>
<div id="aa" style="overflow:hidden;height:100px;width:90px;">
<div id="aa1">
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif1"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif2"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif3"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif4"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif5"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif6"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif7"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif8"  class="lazy" alt="" />
</div>
<div id="aa2"></div>
</div>
<h2>手动滚动 - <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">左</strong> <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">右</strong></h2>
<div id="bb" style="overflow:hidden;height:100px;width:90px;">
<div id="bb1">
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif1"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif2"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif3"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif4"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif5"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif6"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif7"  class="lazy" alt="" />
<img src="/static/imghwm/default1.png"  data-src="/images/logo.gif8"  class="lazy" alt="" />
</div>
<div id="bb2"></div>
</div>
</body>
</html>

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Benutzerdefinierte JavaScript- und PHP-Funktionen, die URL-Adressen im Text in anklickbare Links umwandeln_Javascript-FähigkeitenNächster Artikel：Benutzerdefinierte JavaScript- und PHP-Funktionen, die URL-Adressen im Text in anklickbare Links umwandeln_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen