无缝滚动研究

最新推荐文章于 2022-09-17 16:19:48 发布

frank201113

最新推荐文章于 2022-09-17 16:19:48 发布

阅读量349

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Handsome_fan/article/details/51926889

今晚研究了无缝滚动的代码。无缝滚动的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    
	    #demo {
	     background: #FFF;
	     overflow:hidden;
	     border: 1px dashed #CCC;
	     width: 500px;
	    }
	    #demo img {
	     border: 3px solid #F2F2F2;
	    }
	    #indemo {
	     float: left;
	     width: 800%;
	    }
	    #demo1 {
	     float: left;
	    }
	    #demo2 {
	     float: left;
	    }
    
    </style>
</head>
<body>
	<div id="demo">
	    <div id="indemo">
		    <div id="demo1">
		    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
		    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
		    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
		    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
		    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
		    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
		    </div>
		    <div id="demo2"></div>
		 </div>
    </div>
    <script>
    
    var speed=10; //数字越大速度越慢
    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML;
    function Marquee(){
      if(tab2.offsetWidth-tab.scrollLeft<=0)
      /*offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度*/
	/*scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离*/
      tab.scrollLeft-=tab1.offsetWidth
      else{
        tab.scrollLeft++;
        console.log(tab.scrollLeft);
      }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};
    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
    
    </script>
</body>
</html>

程序运行结果：

图片是向左滚动的。

注意：

scrollLeft属性要在父容器在scroll状态下才有效果。

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #demo{
            width: 500px;
            height: 50px;
            border: 1px solid red;
            background: #ccc;
            overflow: hidden;
        }
        #indemo{
            width: 10500px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="demo">
        <div id="indemo">
            <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
            <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
            <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
            <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
            <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
            <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
            <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
            <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
            <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
            <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
            <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
            <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

        </div>
        
    </div>
    <script>
        var speed=10;
        var tab=document.getElementById("demo");
        function Marquee(){
            tab.scrollLeft=1000;
            console.log(tab.scrollLeft);
        }
        var MyMar=setInterval(Marquee,speed);
    </script>
</body>
</html>

当父容器#demo在scroll状态后，就可以设置scrollLeft的值了。