zoukankan      html  css  js  c++  java
  • jq 实现文字定时向上滚动效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.box{ 300px; height:30px; border:1px solid red;}
    		.wrap_box{ height:30px; position:relative; overflow:hidden;}
    		.wrap_box ul{ position:absolute; left: 0; top: -20px;}
    		.wrap_box li{ line-height:30px;}
    	</style>
    	
    	<script src="jquery-2.2.2.min.js"></script>	
    	<!-- 自行引入jq文件 -->
    	<script>
    	$(function(){
    		var num = -30;
    		// console.log($(".ul1").position().top); //测试是否能取到
    		setInterval(function(){
    			
    			var num1  = $(".ul1").position().top + num;
    			console.log(num1);//看数据
    			if(num1 <= -440) //因为是小数 为什么是小于等于的  如果不是整-440的话就不会进入判断 所有小于等于
    			{
    				num1 = -20; //开始定位的时候定在了-20的位置 所以要到-20
    			}
    			$(".ul1").animate({"top":num1})
    		}, 2000)
    	})
    		
    		
    	</script>
    </head>
    <body>
    	<div class="box">
    		<div class="wrap_box">
    			<ul class="ul1">
    				<li><a href="">,jQuery的css方法获得</a></li>
    				<li><a href="">left数据数值可</a></li>
    				<li><a href="">不可以去</a></li>
    				<li><a href="">掉</a></li>
    				<li><a href="">px</a></li>
    					<li><a href="">,jQuery的css方法获得</a></li>
    				<li><a href="">left数据数值可</a></li>
    				<li><a href="">不可以去</a></li>
    				<li><a href="">掉</a></li>
    				<li><a href="">px</a></li>
    					<li><a href="">,jQuery的css方法获得</a></li>
    				<li><a href="">left数据数值可</a></li>
    				<li><a href="">不可以去</a></li>
    				<li><a href="">掉</a></li>
    				<li><a href="">px</a></li>
    			</ul>
    		</div>
    	</div>
    </body>
    </html>
    

      

  • 相关阅读:
    javascript得知
    一旦配置oracle em经验
    windows 下一个mysql password忘记改变
    彩色图像--图像切 色彩空间切割
    Delphi 6 Web Services初步评估之三(转)
    Delphi 用Web App Debugger简单调试ISAPI 转
    Delphi socket() 函数的应用
    用Delphi实现WinSocket高级应用
    delphi编写winsocket的流程
    Delphi使用NativeXml访问XML文件
  • 原文地址:https://www.cnblogs.com/mingjixiaohui/p/5294038.html
Copyright © 2011-2022 走看看