zoukankan      html  css  js  c++  java
  • 图标线性回归移动到指定的位置

    图标斜着移动,看代码了


    <!DOCTYPE html >
    <html>
    	<head>
    		<title>图标线性回归移动到指定的位置</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	</head>
    	<body style="font-size: 13px;">
    		<div>
    			<div style="margin: 30px 0 30px 0;">
    				
    				<div style="margin: 50px 0 0 500px;"><b id="b">B</b></div>
    				<div style="margin: 80px 0 0 300px;"><b id="d">D</b></div>
    			</div>
    			<div>
    				<button name="move">move</button>
    				<button name="reset">reset</button>
    			</div>
    		</div>
    		<!-- OK图标设置成隐藏浮动 -->
    		<div id="ok" style="display: none; position: absolute;  16px; font-color: white; background-color: red;">OK</div>
    		
    		<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
    		<script type="text/javascript">
    			
    			var pb = {left: $("#b").position().left + $("#b").width(), top: $("#b").position().top};//B点位置
    			
    			var pd = {left: $("#d").position().left + $("#d").width(), top: $("#d").position().top};//D点位置
    			$("#ok").css({left: pd.left, top: pd.top});//初始将OK放在D点
    			
    			$("button[name=move]").click(function() {//点击move按钮开始从D点移动B点
    				$("#ok").fadeIn().animate({
    					left: pb.left,
    					top: pb.top
    				}, 1000,function(){//1秒内完成动画,可以设置动画速度,完了隐藏
    				   $("#ok").fadeOut()
    				});
    				
    			});
    			
    			$("button[name=reset]").click(function() {//点击reset按钮回到初始状态
    				$("#ok").hide().css({left: pd.left, top: pd.top});
    			});
    		</script>
    	</body>
    </html>
    


  • 相关阅读:
    2016年 河南工业大学校赛 D题.rqy的键盘
    2016年 河南工业大学校赛 C题.魔法宝石
    jqueryMobile导航
    jqueryMobile列表
    jqueryMobile
    停止css3动画
    导航条
    移动端前面必须加的两行代码
    标签页
    file上传图片预览(此方法支持app)
  • 原文地址:https://www.cnblogs.com/bbsno1/p/3262723.html
Copyright © 2011-2022 走看看