<!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. Unity3D 通用提示窗口实现分析（Inventory Pro学习总结）

    背景 游戏中的UI系统或者叫做GUI窗口系统主要有:主要装备窗口(背包,角色窗口也是一种特殊窗口).确实提示窗口(如购买确认).信息提示窗口(一遍没有按钮,ContexntMenu)和特殊窗口(聊天记 ...

  2. js兼容

    //document.getElementsByClassName(); if (!document.getElementsByClassName) { document.getElementsByC ...

  3. MAT之prim算法

    prim算法 边赋以权值的图称为网或带权图,带权图的生成树也是带权的,生成树T各边的权值总和称为该树的权. 最小生成树(MST):权值最小的生成树. 生成树和最小生成树的应用:要连通n个城市需要n-1 ...

  4. 进击的java - tomcat的安装，配置都正确之后，还是报错

    1.问题 配置Apatch Tomcat过程报错: The CATALINA_HOME environment variable is not defined correctly.This envir ...

  5. 关于C语言链表的学习

    今天讲了一种非传统型的链表.听得不是太好. 到数据结构那一部分的时候.一定要好好听听.

  6. springday03-go2

    新建springmvc01项目1.创建项目,导入jar包 拷贝jar/spring/first下的五个spring的jar包,以及jar/spring/mvc下的两个mvcjar包放在lib下 2.创 ...

  7. Cookie—的使用

    编写 Cookie 浏览器负责管理用户系统上的 Cookie.Cookie 通过 HttpResponse 对象发送到浏览器,该对象公开称为 Cookies 的集合. 可以将 HttpResponse ...

  8. CSS3 Transform Matrix

    css3中的transform让我们操作变形变得很简单,诸如,translate–移动,scale–缩放,rotate–旋转,skew–斜切.这几个属性很方便,也很简单,但是其中matrix我们就不常 ...

  9. 夺命雷公狗ThinkPHP项目之----企业网站6之栏目的添加（主要用模型来验证字段）

    我们刚才的控制器已经写好了,那么我们现在就来完成我们的模型, 首先我们在Model目录下创建一个CategoryModel.class.php 代码如下: <?php namespace Adm ...

  10. 【兄弟连ThinkPHP】1、介绍和安装

    琢磨了好几天的ThinkPHP了,兄弟连的视频真心不错,下面是记得一些要点,只做备忘,有兴趣的朋友请去百度兄弟连. ## ThinkPHP 3 介绍及安装#讲师:赵桐正微博:http://weibo. ...