<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

	div{ width:100px; height:100px; background-color:red;  margin-top:20px;}

</style>

<script type="text/javascript">

window.onload=function(){

		var oDiv=document.getElementsByTagName('div');

		//int i=0;

		//for(i=0;i<oDiv.length;i++){

			//}

		oDiv[0].onmouseover=function(){

				StarMove(this,300,'width');

			}

		oDiv[0].onmouseout=function(){

				StarMove(this,100,'width');

			}

		oDiv[1].onmouseover=function(){

				StarMove(this,150,'height');

			}

		oDiv[1].onmouseout=function(){

				StarMove(this,100,'height');

			}

	}
//获取兼容的对应属性值

function getStyle(obj,attr){

		if(obj.currentStyle){

				return obj.currentStyle[attr];

			}

		else{

				return getComputedStyle(obj,false)[attr];

			}

	}

function StarMove(obj,iTarget,attr){

		clearInterval(obj.timer);//清掉对应的 对象的定时器

		obj.timer=setInterval(function(){

			var iCur=parseInt(getStyle(obj,attr));

			var iSpeed=(iTarget-iCur)/8;

			iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

				if(iCur==iTarget){

						clearInterval(obj.timer);

					}

				else{

						obj.style[attr]=iCur+iSpeed+'px';

					}

			},30);

	}

</script>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

</body>

</html>

　　

js笔记---封装一般运动的更多相关文章

  1. js笔记---封装自己的Ajax方法

    //地址 成功方法 失败方法function Ajax(url, funsucc, funfial) { var oAjax = null; if (window.XMLHttpRequest) { ...

  2. JS 对象封装的常用方式

    JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装 function Person (name,age,sex){ this.name = na ...

  3. js类封装

    将js方法封装成类,好处就是团队开发中避免命名冲突,部分类整理代码如下: function LocalStorageHelper() { //检测浏览器是否支持localStorage this.ch ...

  4. 【Node.js 自己封装的库 http_parse, libuv】

    [Node.js 自己封装的库 http_parse, libuv] Node.js 介绍:一个网络框架,更多:http://www.oschina.net/p/nodejs 官网:http://no ...

  5. Nuxt.js笔记

    前置知识 SSR服务器渲染 Vue SSR(server side rendering)服务端渲染 和 Vue SPA(single page application)单页应用 Vue SSR-> ...

  6. main.js中封装全局登录函数

    1. 在 main.js 中封装全局登录函数 通过 vue 对象的原型扩展,可以扩展一个函数,这样这个函数就可以在每一个界面通过类似指向对象的方式,去访问这个函数. 如下是 main.js 扩展的函数 ...

  7. Node.js模块封装及使用

    Node.js中也有一些功能的封装,类似C#的类库,封装成模块这样方便使用,安装之后用require()就能引入调用. 一.Node.js模块封装 1.创建一个名为censorify的文件夹 2.在c ...

  8. 第一百四十二节，JavaScript，封装库--运动动画和透明度动画

    JavaScript,封装库--运动动画和透明度动画 /** yi_dong_tou_ming()方法,说明 * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作 * 1,x ...

  9. 基于js原生封装的点击显示完整文字

    基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...

随机推荐

  1. linux:档案权限

    一.例如:-rw-r--r--.  1 root root  129 Dec 29  2013 .tcshrc 详细: 1.-rw-r--r--:档案类型和权限(总共十个栏位) 1.1:第一个栏位代表 ...

  2. Swift动画编程指南-01 简介

    大家好,我是老镇,这段时间家里和工作上发生了很多的事情,所以很长一段时间都没有出来搞什么小动作了.在接下来的一段时间内我会制作一些列关于使用Swift进行动画编程的视频,希望和大家胃口. 在iOS的世 ...

  3. Lintcode: Permutation Index II

    Given a permutation which may contain repeated numbers, find its index in all the permutations of th ...

  4. Lintcode: Rehashing

    The size of the hash table is not determinate at the very beginning. If the total size of keys is to ...

  5. PHP-字符串过长不用担心

    字符串过长可以用定界符: >>>GOD ................巨长务必的字符串 GOD;

  6. C++之路起航——标准模板库（vector）

    vector(动态数组或向量):动态分配内存空间的线性储存结构. 需要包括头文件<vector> 定义: vector<数据类型> 变量名: Eg: vector<int ...

  7. JavaScript中Date(日期对象),Math对象--学习笔记

    Date对象 1.什么是Date对象? 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 语法:var Udate=new Date();  注:初始值为当前时间(当前电脑系统 ...

  8. 夺命雷公狗---node.js---13之Buffer的转换

    其实Buffer也是一种数据结构的东西,但实际中用得并不多,我们只需要知道常用的转换方法即可: /** * Created by leigood on 2016/8/30. */ var str = ...

  9. Scrum站立会议----11月4日

    小组名称:nice! 组长:李权 成员:于淼  刘芳芳韩媛媛 宫丽君 时间:2016.11.4    12:00--12:30 地点:传媒西楼220室 代码地址:Https:  https://git ...

  10. java 网络编程（二）----UDP基础级的示例

    下面介绍UDP基础级的代码示例: 首先了解创建UDP传输的发送端的思路: 1.创建UDP的Socket服务.2.将要发送的数据封装到数据包中.3.通过UDP的socket服务将数据包发送出去.4.关闭 ...