图片滚动代码分析

最新推荐文章于 2025-08-13 18:53:35 发布

转载最新推荐文章于 2025-08-13 18:53:35 发布 · 831 阅读

文章标签：

#代码分析 #border #div #function #html #float

js 专栏收录该内容

60 篇文章

订阅专栏

<style type="text/css">
    <!--
    #demo {     background: #FFF;     overflow:hidden;     border: 1px dashed #CCC;     width: 600px;    }
    #demo img {     border: 3px solid #F2F2F2;    }
    #indemo {     float: left;     width: 800%;    }
    #demo1 {     float: left;    }
    #demo2 {     float: left;    }
    -->
    </style>
    <div id="demo">
    <div id="indemo">
    <div id="demo1">
    <a href="#"><img src="http://www.rcles.com/data/attachment/forum/201207/27/1103437eautdbba7pr1sbf.jpg" border="0" /></a>
    <a href="#"><img src="http://www.rcles.com/data/attachment/forum/201207/27/1103437eautdbba7pr1sbf.jpg" border="0" /></a>
    <a href="#"><img src="http://www.rcles.com/data/attachment/forum/201207/27/1103437eautdbba7pr1sbf.jpg" border="0" /></a>
    <a href="#"><img src="http://www.rcles.com/data/attachment/forum/201207/27/1103437eautdbba7pr1sbf.jpg" border="0" /></a>
    <a href="#"><img src="http://www.rcles.com/data/attachment/forum/201207/27/1103437eautdbba7pr1sbf.jpg" border="0" /></a>
    <a href="#"><img src="http://www.rcles.com/data/attachment/forum/201207/27/1103437eautdbba7pr1sbf.jpg" 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)
    tab.scrollLeft-=tab1.offsetWidth
    else{
    tab.scrollLeft++;
    }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};
    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
    -->
    </script>

------------------------------------------------------------------------------------------------------------------------------------

把demo1标签里的脚步赋值与demo2


innerHTML看它的英文单词也可以明白就是里面的字符按html标记的语言格式取出来或重新设置。
其实innerHTML不是w3c标准所支持的，但是各大浏览器厂商都提供了它的实现，所以实际上它还是标准的。
innerHTML是一个属性，用法举个例子，假如有个标签:
<div id="div1"></div>
下面是js：
var div1=document.getElementById("div1");
div1.innerHTML="<span style='color:red'>Hi</span>";//重新设置div1内的html代码。
alert(di1.innerHTML);//取出div1里面的 html代码

还有个innerText属性，这个属性只被ie支持，其实没有必要有这个属性，因为innerHTML完全可以替代它。
div1.innerHTML="Hi";//其实和innerText的效果一样
-----------------------------------------------------------------------------------------------------------------------------------

inerHTML是html标签的属性，成对出现的标签大多数都有这个属性 ，它是开始标签和结束标签之间的字符，不包括标签本身，比如
<p id="pp">aaaaaaaaaa<span id="ss">bbbbbbbb</span> </p> ，这里的p标签和span标签嵌套在一起．那么pp.innerHTML的内容就是aaaaaaaaaa<span id="ss">bbbbbbbb</span>， ss.innerHTML的内容就是bbbbbbbb．
　　"demo2.innerHTML=demo1.innerHTML"是为了实现图片的横向滚动．

-----------------------------------------------------------------------------------------------------------------------------------
在javascript中scrollLeft代表什么意思
有两个值一个是：scrollTop一个是scrollLeft
第一个代表页面利用滚动条滚动到下方时，隐藏在滚动条上方的页面的高度；
第二个代表页面利用滚动条滚动到右侧时，隐藏在滚动条左侧的页面的宽度
demo.scrollLeft指的是滚动的距离，demo1.offsetWidth取的是demo1的宽度，offsetWidth比width要更精确 x-=1 就是x=x-1； demo1 和demo2 应该都

来源于网上