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

红太狼 2022-04-17 20:17 455阅读 0赞

按照步骤来：

一  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

<img id="left" title="向左滚动" alt="向左滚动" style="cursor: pointer;" src="images/ico1.gif" width="13" height="13" />
    
    <img id="right" title="向右滚动" alt="向右滚动" 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>
    
                      
                        <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

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