zoukankan      html  css  js  c++  java
  • js特效 图片滚动(兼容IE火狐)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>JavaScript 无缝八向滚动(兼容ie/ff)</title>
    <style type="text/css">
        <!--
        #demo {
         background: #FFF;
         overflow:hidden;
         border: 1px dashed #CCC;
         height: 100px;
         text-align: center;
         float: left;
        }
        #demo img {
         border: 3px solid #F2F2F2;
         display: block;
        }
        -->
        </style>
    
    </head>
    <body>
    <div id="demo">
        <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>
        </div>
        <div id="demo2"></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; //克隆demo1为demo2
        function Marquee(){
        if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
        tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
        else{
        tab.scrollTop++
        }
        }
        var MyMar=setInterval(Marquee,speed);
        tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
        tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
        -->
        </script>
    
     
    
    
    </body>
    </html>
    

      

  • 相关阅读:
    4--Python入门--Python数据集合类型--集合
    3--Python入门--Python数据集合类型--元组
    2--Python入门--Python数据集合类型--列表
    1--Python 入门--Python基础数据类型
    1--Testng功能简介
    2--JAVA+Maven+TestNG搭建接口测试框架搭建
    2--linux命令--查看磁盘空间
    登录功能测试总结
    在Linux环境下搭建Tomcat+mysql+jdk环境
    如何在Linux系统下挂载光盘
  • 原文地址:https://www.cnblogs.com/Gieag/p/2116940.html
Copyright © 2011-2022 走看看