zoukankan      html  css  js  c++  java
  • js文字的无缝滚动(上下)

    使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可

    Dom内容

    <div id="container">
    			<ul id="con1">
    				<li>javascript1</li>
    				<li>javascript2</li>
    				<li>javascript3</li>
    				<li>javascript4</li>
    				<li>javascript5</li>
    				<li>javascript6</li>
    				<li>javascript7</li>
    			</ul>
    		</div>
    

    css内容

    #container{400px;height:24px;margin:0 auto;border:1px solid red;overflow: hidden;}
    			ul{list-style: none;padding:0;margin:0}
    			ul li{height:24px;line-height: 24px;}
    

    js相关内容

    <script type="text/javascript">
    		var c=document.getElementById("container");
    		var con1=document.getElementById("con1");
    		con1.innerHTML+=con1.innerHTML;  //把自身的内容变为原来的2倍
    		// timer,t;
    		var iHeight=24;
    		var d=1000;
    		var speed=50;
    		function sTop(){
    			if(c.scrollTop%iHeight==0){//如果卷去的距离能够除尽一行的高度
    				clearInterval(timer);//把定时器清除  
    				t=setTimeout(startMove,d);//延迟1s后继续触发定时器
    			}
    			if(c.scrollTop>=con1.scrollHeight/2){  //如果卷去的高度>=整个ul高度的一半时
    				c.scrollTop=0;
    				c.scrollTop=c.scrollTop-con1.scrollHeight/2; //让ul回到原点  即c.scrollTop=0
    			}else{
    				c.scrollTop++;  //如若不然,继续往上滚动
    			}
    		}
    		function startMove(){
    			c.scrollTop++;
    			timer=setInterval(sTop,speed);
    		}
    		startMove();
    		c.onmouseover=function(){
    			clearInterval(timer);
    			clearTimeout(t);
    		}
    		c.onmouseout=function(){
    			timer=setInterval(sTop,speed);
    		}
    	</script>
    
  • 相关阅读:
    tensorflow模型的保存与恢复
    Anaconda Linux端环境管理
    Windows环境下Redis集群部署
    Error fetching https://ruby.taobao.org/:RubySass淘宝镜源无效解决
    ORM 轻量级框架 Dapper(介绍)
    TypeScript 数据类型
    TypeScript 环境搭建
    微信小程序反编译
    利用Fiddler实现手机抓包
    SQL 优化常用查询
  • 原文地址:https://www.cnblogs.com/Sarah119/p/9395008.html
Copyright © 2011-2022 走看看