js封装插件|JS简单封装的图片无缝滚动效果示例【测试可用】

更新时间:2021-08-01    来源:js教程    手机版     字体:

【www.bbyears.com--js教程】

 代码如下 "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/1999/xhtml" lang="utf-8">      "Content-Type" content="text/html; charset=utf-8" />    无缝滚动图片示例-F-BLOG        <script type="text/javascript">      word">function $(id){        word">return document.getElementById(id);      }      function Marquee(id,toFollow,speed)      {        var doScroll;        var scrollBox_x="+id+"abox'>"+$(id).innerHTML+"+id+"bbox'>"+$(id).innerHTML+"";        var scrollBox_y="+id+"abox'>"+$(id).innerHTML+"+id+"bbox'>"+$(id).innerHTML+"";        var begin=function(){          switch(toFollow){            case "left":              $(id).innerHTML=scrollBox_x;              doScroll=setInterval(function(){                if($(id).scrollLeft==$(id+"abox").offsetWidth) $(id).scrollLeft=0;                $(id).scrollLeft++;              },speed);              break;            case "right":              $(id).innerHTML=scrollBox_x;              doScroll=setInterval(function(){                if($(id).scrollLeft<=0) $(id).scrollLeft=$(id+"bbox").offsetWidth;                $(id).scrollLeft--;              },speed);              break;            case "top":              $(id).innerHTML=scrollBox_y;              doScroll=setInterval(function(){                if($(id).scrollTop==$(id+"abox").offsetHeight) $(id).scrollTop=0;                $(id).scrollTop++;              },speed);              break;            case "bottom":              $(id).innerHTML=scrollBox_y;              doScroll=setInterval(function(){                if($(id).scrollTop<=0) $(id).scrollTop=$(id+"bbox").offsetHeight;                $(id).scrollTop--;              },speed);              break;            }          }          begin();          $(id).onmouseover=function() {clearInterval(doScroll);}          $(id).onmouseout=function() {begin();}        }        window.onload=function(){          Marquee("demo2","left",30);          Marquee("demo1","right",20);          Marquee("demo3","top",30);          Marquee("demo4","bottom",30);        }</script>     "demo1" style="overflow:hidden;height:100px;width:300px;">            "mm.jpg" mce_src="mm.jpg" style="height:100px;width:200px;" />       "me.jpg" mce_src="me.jpg" style="height:100px;width:200px;" />           
   "demo2" style="overflow:hidden;height:100px;width:300px;">            "mm.jpg" mce_src="mm.jpg" style="height:100px;width:200px;" />       "me.jpg" mce_src="me.jpg" style="height:100px;width:200px;" />           
   "demo3" style="overflow:hidden;height:150px;width:200px;">            "mm.jpg" mce_src="mm.jpg" style="height:100px;width:200px;" />       "me.jpg" mce_src="me.jpg" style="height:100px;width:200px;" />           
   "demo4" style="overflow:hidden;height:150px;width:200px;">            "mm.jpg" mce_src="mm.jpg" style="height:100px;width:200px;" />       "me.jpg" mce_src="me.jpg" style="height:100px;width:200px;" />        



本文来源:http://www.bbyears.com/wangyezhizuo/133270.html

热门标签

更多>>

本类排行