zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    OI 复赛注意事项整理
    U138415 堆箱子 | 扩展欧几里得 扩欧
    扩欧-扩展欧几里得 | 数论学习笔记
    U138097 小鱼吃大鱼 埃氏筛
    牛客1029A 袜子分配
    U137971 公司搬迁
    初赛知识点整理
    SQL注入技术
    写出易于调试的SQL
    dos命令大全
  • 原文地址:https://www.cnblogs.com/Nbge/p/6145546.html
Copyright © 2011-2022 走看看