• css 上下滚动效果


    <html>
    <head>
    <style>
    .scroll{
    	overflow:hidden;
    	100%;
    }
    .scrollout{
      height:250px;
      100%;
      overflow:hidden;
      cursor:pointer;
      }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
     //无缝滚动
    	var rclone=$("#rscroll").html();//这里要用html而不能用clone,html()方法是获取html代码,你是要加长html代码,clone方法是要复制节点信息
    	$("#rscrollout").append(rclone);//其次,你滚动的内容长度要大于200+scrollTop的高度才能进行滚动
    	var lclone=$("#lscroll").html();
    	$("#lscrollout").append(lclone);
    	var speed=1;
    	var NY=window.setInterval(scroll2,100);
    	function scroll2(){
    		var scrollTop=$(".scrollout").scrollTop()+speed;
    		if(scrollTop==400){
    			scrollTop=0;
     		}
    		$(".scrollout").scrollTop(scrollTop);
    	}
    
    	$(".scrollout").hover(function(){clearInterval(NY)},function(){NY=setInterval(scroll2,100);});
    
    </script>
    </head>
    <body>
    <div class="scrollout" id="rscrollout">
    				<div id="rscroll" class="scroll" style="height:400px;">
    				
    					<ul>
    						<li>1</li>
    						<li>11</li>
    						<li>111</li>
    						<li>1111</li>
    						<li>11111</li>
    						<li>111111</li>
    						<li>1111111</li>
    						<li>11111111</li>
    						<li>111111111</li>
    						<li>1111111111</li>
    						<li>11111111111</li>
    						<li>111111111111</li>
    						<li>1111111111111</li>
    						<li>11111111111111</li>
    						<li>111111111111111</li>
    						
    					</ul>
    				</div>
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    Python---HTML常用标签
    Python---进阶---Tkinter---game
    工程师的URL大全
    docker安装小笔记
    SQL server查询语句
    非常好用的sersync同步工具
    运维自动化的标准
    使用ansible实现轻量级的批量主机管理
    emos邮件系统的web密码修改方法
    Linux 之 rsyslog+mysql+LogAnalyzer 日志收集系统
  • 原文地址:https://www.cnblogs.com/Nbge/p/6145546.html
Copyright © 2020-2023  润新知