zoukankan      html  css  js  c++  java
  • JS实现文字图片无缝滚动

    图片滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现,上网找了一些方法,发现marquee可以实现无缝,但要在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=utf-8" />
    <title>文字列表无缝向上滚动JavaScript代码</title>
    <style type="text/css">
    #xunhuan{
    overflow:hidden; /*溢出的部分不显示*/
    height:100px;
    }
    #xunhuan1,#xunhuan2{height: auto;}
    </style>
    </head>
    <body>
    	   <div id="xunhuan">
                   	<div id="xunhuan1">
    	                 <ul>
    	                 	<li>这是第1条</li>
    	                 	<li>这是第2条</li>
    	                 	<li>这是第3条</li>
    	                 	<li>这是第4条</li>
    	                 	<li>这是第5条</li>
    	                 	<li>这是第6条</li>
    	                 </ul>	
                     </div>
                     <div id="xunhuan2"></div>
                </div>
    <script> 
    var speed=10; //数字越大速度越慢
    var tab=document.getElementById("xunhuan");
    var tab1=document.getElementById("xunhuan1");
    var tab2=document.getElementById("xunhuan2");
    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>

    这里面需要注意的是,要加上我在style里面写的样式,另外两个注意点就是:里面的li不能float,最外围的xunhuan的高度要小于里面元素的高度,以足够它循环滚动。

    例子是向上滚动的效果,如果想要向左滚动,做相应的改动即可。

  • 相关阅读:
    Python学习(四十三)—— Djago-admin管理工具
    Python心得基础篇【1】入门篇
    ServletRequest接口和HttpServletRequest接口
    Java swing
    postgresSQL指令
    Oracle数据库相关
    Java 接口
    Java 求一段代码运行所需要的时间——模板方法设计模式
    Java SE基础巩固
    Java开发环境
  • 原文地址:https://www.cnblogs.com/sunli6772/p/4077862.html
Copyright © 2011-2022 走看看