首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

js 兑现div里面的内容滚动,并可以通过按钮控制

2012-10-20 
js 实现div里面的内容滚动,并可以通过按钮控制按照步骤来:?一? css 样式控制:.in_f {CLEAR: both HEIGHT:

js 实现div里面的内容滚动,并可以通过按钮控制

按照步骤来:

?

一? css 样式控制:

.in_f {CLEAR: both; HEIGHT: 46px}.in_f .a {BACKGROUND: url(../images/i12.gif) no-repeat left 50%; FLOAT: left; WIDTH: 160px; HEIGHT: 46px}.in_f .b {FLOAT: left; WIDTH: 17px; HEIGHT: 46px}.in_f .centerBox {DISPLAY: inline; FLOAT: left; MARGIN: 0px 10px; OVERFLOW: hidden; width:498px; HEIGHT: 232px}.in_f .centerBox IMG {MARGIN: 0px 3px}.in_f .d {FLOAT: left; WIDTH: 16px; HEIGHT: 46px}.in_f .b IMG {CURSOR: pointer}.in_f .d IMG {CURSOR: pointer}

?

?

二:准备js

??? jQuery.js

??? jquery-ui-1.8.6.custom.min.js

??? MSClass.js? ----这个就是滚动的操作js

?

???

<!--  引入js 和 css -->  
?<!--  控制滚动的按钮  --><img id="left" title="向左滚动" alt="js 兑现div里面的内容滚动,并可以通过按钮控制" style="cursor: pointer;" src="images/ico1.gif" width="13" height="13" /><img id="right" title="向右滚动" alt="js 兑现div里面的内容滚动,并可以通过按钮控制" style="cursor: pointer;"  src="images/ico2.gif" width="13" height="13" /><br><br><br><br><!--  滚动体  --><DIV id="div" class=in_f>                 <DIV  class=centerBox id=marqueedivcontrol>                  <!-- 这里放你想要滚动的东西。。可以是图片也可以是table..但是记得里面的东西的宽度要超过div的宽度...不然就不会滚动。。也没必要滚动 -->                    <tr>    <td width="166" align="center" valign="top"><table width="160" border="0" cellspacing="0" cellpadding="0">      <tr>        <td height="60" colspan="2" align="center" valign="middle"><img src="images/tu1.gif" width="160" height="46" /></td>      </tr>                      <table>                </DIV> </DIV><!--  下面是滚动的初始化代码 --><SCRIPT type=text/javascript>var marquee=new Marquee("marqueedivcontrol");marquee.Direction="left";marquee.Step=1;marquee.Width=498;marquee.Height=232;marquee.Timer=20;marquee.ScrollStep=-1;//此句禁止鼠标控制// 查看了 MSClass.js 的源码,,,你会发现 derection 2 表示左移动  3表示右移动..0 表示 top // 反正注意看源码就好了...$("#left").click(function(){marquee.Direction=2}); $("#right").click(function(){marquee.Direction=3});$("div").mousemove(function(){marquee.Direction=0});$("div").mouseout(function(){marquee.Direction=2});marquee.Start();</SCRIPT>

?

最后的效果就是??鼠标点击按钮控制内容的滚动,,当鼠标移动到内容上面就停止,,移开就直接移动?

?

嘿嘿...我也上传 JS 包...也做了一个dome,虽然有点粗糙...但是效果实现了!? 嘿嘿。。....吃饭去了

?

今天有空。。。更新了下功能。刚刚在开发中也碰到,点击的时候。。不仅要移动,而且要加快移动1秒,再还原到原来的速度,,,,,,,,

?

?? 下面的对上面代码的一次升级,

???

 $("#left").click(function(){  //把上面的代码替换成这样marquee.Direction=2;boo = true;marquee.Step=10; //加快移动步伐if(boo){setTimeout(stoptime,500);}}); $("#right").click(function(){ //把上面的代码替换成这样marquee.Direction=3 boo = true;marquee.Step=10; //加快移动步伐if(boo){setTimeout(stoptime,500);}});

?

?

 //停止加快        function stoptime(){           marquee.Step=1;       boo = false;         }

?

?? O(∩_∩)O哈哈~。。这样就可以实现,点击移动的时候,,并且可以加速移动下,

?

? 请看我最新上传的????? dome2.rar

?

? 里面的代码很清楚了。。嘿嘿。。。。。。。。。

热点排行