zoukankan      html  css  js  c++  java
  • 利用scrollTop 制作图片无缝滚动


    <!doctype html>
    <title>javascript无缝滚动 by 司徒正美</title>
    <meta charset="utf-8"/>
    <meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
    <meta name="description" content="javascript无缝滚动 by 司徒正美" />
    <style type="text/css">
    h1 {
    font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
    }
    #marquee {
    height:300px;
    200px;
    overflow:hidden;
    position:relative;
    border:10px solid #F2F1D7;
    }
    #marquee img {
    display:block;
    }
    #marquee dd {
    margin:0px;
    padding:0px;
    }
    </style>
    <script type="text/javascript">
    var Marquee = function(id){
    try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
    var container = document.getElementById(id),
    original = container.getElementsByTagName("dt")[0],
    clone = container.getElementsByTagName("dd")[0],
    speed = arguments[1] || 10;
    clone.innerHTML=original.innerHTML;
    alert(clone.offsetTop)
    container.scrollTop = clone.offsetTop;
    var rolling = function(){
    if(container.scrollTop == 0){
    container.scrollTop = clone.offsetTop;
    }else{
    container.scrollTop--;
    }
    }
    var timer = setInterval(rolling,speed)//设置定时器
    container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时,清除定时器,停止滚动
    container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
    }
    window.onload = function(){
    Marquee("marquee");
    }
    </script>
    <h1>javascript无缝滚动(向下滚动) by 司徒正美</h1>

    <dl id="marquee">
    <dt>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    </dt>
    <dd></dd>
    </dl>

  • 相关阅读:
    【转】Reactor与Proactor两种模式区别
    [转] 比较清楚的阻塞与非阻塞和同步与异步
    一眨眼已做开发十年
    【转】Linux CentOS内核编译:下载CentOS源码、编译2.6.32-220的错误(apic.c:819 error 'numi_watchdog' undeclared)
    [转] Makefile经典教程(掌握这些足够)
    [转]centos 下 autoconf版本升级
    centos安装CODEBLOCKS
    【转】linux 编译安装nginx,配置自启动脚本
    Install Qt creator
    LeetCode 983. Minimum Cost For Tickets
  • 原文地址:https://www.cnblogs.com/zhengyan/p/5000394.html
Copyright © 2011-2022 走看看