<!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. RubyMine(基于IntelliJ IDEA的Ruby集成开发环境)快捷键

    常用快捷键: 一级必会Ctrl+Alt+G:弹出GenerateCtrl+Alt+L:格式化代码Alt+F1:切换视图(Project, Structure, etc.).Alt+F2:弹出预览窗口, ...

  2. HDU 4834 JZP Set（数论+递推）（2014年百度之星程序设计大赛 - 初赛（第二轮））

    Problem Description 一个{1, ..., n}的子集S被称为JZP集,当且仅当对于任意S中的两个数x,y,若(x+y)/2为整数,那么(x+y)/2也属于S.例如,n=3,S={1 ...

  3. Demo13

    this.listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void o ...

  4. <构建之法>之一至二章

    身在大学,却想起了在高中的生活和初中的生活,特别是初中的生活,为什么这么说呢!因为<构建之法>,看了其中的两章的内容,为什么想到了初中和高中的生活呢,因为在高中和初三的时候看的最多的就是课 ...

  5. mysql长连接和短连接的问题 转

    什么是长连接? 其实长连接是相对于通常的短连接而说的,也就是长时间保持客户端与服务端的连接状态. 通常的短连接操作步骤是: 连接->数据传输->关闭连接: 而长连接通常就是: 连接-> ...

  6. js 获取选中的多选框

    前台html <span class="spbox"> <input type="checkbox" name="category& ...

  7. 转：V$SQL,V$SQLAREA,V$SQLTEXT

    V$SQL*表用于查看Shared SQL Area中SQL情况 V$SQLTEXT V$SQLTEXT用途很简单,就是用来查看完整的SQL语句,V$SQL和V$SQLAREA只能显示1000 byt ...

  8. [笔记]PHP文件系统处理

    PHP文件系统处理 ***所有的文件处理都是使用系统函数完成的. ***php文件处理 是 基于linux/unix系统为模型的, 在linux下完全没问题 在windows下有一些 有差别. ### ...

  9. session_start()一些问题

    session问题集锦 对于PHP的session功能,始终找不到合适的答案,尤其是一些错误,还有一些没有错误的结果,最可怕的就是后者,一直为许多的初学者为难.就连有些老手,有时都被搞得莫名其妙.本文 ...

  10. 绑定repeater时三目运算加特殊结果处理

    <%#((Convert.ToDouble().ToString() != ).ToString(%