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>
    

      

  • 相关阅读:
    Spring aop 实现异常拦截
    drf 视图家族
    算法与数据结构
    接口
    Kubernetes
    drf
    drf 序列化
    drf 内部模块
    drf 接口
    vue
  • 原文地址:https://www.cnblogs.com/Nbge/p/6145546.html
Copyright © 2011-2022 走看看