zoukankan      html  css  js  c++  java
  • 走口字

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>走口字</title>
    <meta name="author" content="Administrator" />
    <!-- Date: 2015-04-20 -->
    <script src="jquery-1.11.1.js"></script>
    
    <style>
    #div1{500px;height:500px;margin:40px auto;position:relative;border:1px solid black}
    #div2{100px;height:100px;position: absolute;background:red}
    </style>
    <script>
    $(function(){
    	 var $div1 = $('#div1');
    	 var $div2 = $('#div2');
    	 var dir=['left','top','left','top'];
    	 var speed=[10,10,-10,-10];// 往右边速度10  往下速度10 往左速度-10 往上速度-10
    	 var target=[400,400,0,0];//往右终点400 往下终点400 往左终点0 往上终点0
    	 var iNow=0;
    	 var nowVal=0;
    	 
    	 setInterval(function(){
    	 	
    	 	nowVal =  $div2.position()[dir[iNow]] + speed[iNow];//终点=当前值 + 速度
    	 	
    	 	$div2.css(dir[iNow],nowVal);//$div2 运动到 方向dir[iNow] 终点 nowVal
    	 	
    	 	if( Math.abs(nowVal - target[iNow] )<=1){//给个小误差 当前值 和 目标值 距离小于等于1就可以行走
    	 		if( iNow==3 ){
    	 			iNow=0   //当iNow ==3的时候 iNow还原成0 那么div2就会循环走口字
    	 		}else{
    	 			iNow++ //当走到目标点的时候iNow++
    	 		} 
    	 	}
    	 	
    	 },30)
    	 
    })
    </script>
    
    </head>
    <body>
    
    <div id="div1">
    	<div id="div2"></div>
    </div>
    
    </body>
    </html>
    

      

  • 相关阅读:
    mysql练习题练习
    test
    jquery获取地址栏参数
    Sql Server获取数据库字段名,并用list显示在jsp页面
    javascript主页面获取子页面元素
    javascript常用方法
    jquery.cookie实现刷新页面复选框选定状态不变
    JDBC操作Oracle、SqlServer根据日期查询
    mysql 5.1升级为5.5方法
    innodb二进制文件相关的参数
  • 原文地址:https://www.cnblogs.com/webskill/p/4540169.html
Copyright © 2011-2022 走看看