js笔记---封装一般运动
<!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笔记---封装一般运动的更多相关文章
- js笔记---封装自己的Ajax方法
//地址 成功方法 失败方法function Ajax(url, funsucc, funfial) { var oAjax = null; if (window.XMLHttpRequest) { ...
- JS 对象封装的常用方式
JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装 function Person (name,age,sex){ this.name = na ...
- js类封装
将js方法封装成类,好处就是团队开发中避免命名冲突,部分类整理代码如下: function LocalStorageHelper() { //检测浏览器是否支持localStorage this.ch ...
- 【Node.js 自己封装的库 http_parse, libuv】
[Node.js 自己封装的库 http_parse, libuv] Node.js 介绍:一个网络框架,更多:http://www.oschina.net/p/nodejs 官网:http://no ...
- Nuxt.js笔记
前置知识 SSR服务器渲染 Vue SSR(server side rendering)服务端渲染 和 Vue SPA(single page application)单页应用 Vue SSR-> ...
- main.js中封装全局登录函数
1. 在 main.js 中封装全局登录函数 通过 vue 对象的原型扩展,可以扩展一个函数,这样这个函数就可以在每一个界面通过类似指向对象的方式,去访问这个函数. 如下是 main.js 扩展的函数 ...
- Node.js模块封装及使用
Node.js中也有一些功能的封装,类似C#的类库,封装成模块这样方便使用,安装之后用require()就能引入调用. 一.Node.js模块封装 1.创建一个名为censorify的文件夹 2.在c ...
- 第一百四十二节，JavaScript，封装库--运动动画和透明度动画
JavaScript,封装库--运动动画和透明度动画 /** yi_dong_tou_ming()方法,说明 * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作 * 1,x ...
- 基于js原生封装的点击显示完整文字
基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...
随机推荐
- Ubuntu 的基本操作
1.Linux 常用shell 命令,和之前用过的红帽差不多.开发所有和程序相关的代码.压缩包都在一个名为topeet的用户文件夹里 学习了Linux 的重要命令apt-get,用它来安装软件:在使用 ...
- 关于prototype
之前听过课,可是这一块没怎么听懂,最近练了两个例子,又问了问小石同学,朦朦胧胧,感觉还是不太懂,记录点心得 最基本的例子 function Box(name,age){ this.name=name; ...
- SLF4J环境变量配置
因部分程序需要,需要把SLF4J加入到环境变量中. 添加位置:CLASSPATH 添加信息如下: C:\slf4j-1.7.19\slf4j-nop-1.7.19.jar;
- 强连通（hdu4635）最多增加几条单向边后满足最终的图形不是强连通
Strongly connected Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- 20145207 《Java程序设计》第一周学习总结
不好意思,来晚了 别的先不说,先道个歉,放假前跟娄老师多少发生点矛盾,望原谅. 假期忙实习还有一些其他事情,为了认真对待这门课,把剩下的时间留下来,争取一天一章来弥补. 由于没选课加上另一门课没开 ...
- [转]史上最全的MSSQL复习笔记
阅读目录 1.什么是SQL语句 2.使用sql语句创建数据库和表 3.创建数据表 4.数据完整性约束 5.四中基本字符类型说明 6.SQL基本语句 7.类型转换函数 8.日期函数 9.数学函数 10. ...
- Java基础(55):Exception类详解（转）
Java中的异常 Exception java.lang.Exception类是Java中所有异常的直接或间接父类.即Exception类是所有异常的根类. 比如程序: public class Ex ...
- C++之路进阶——bzoj2199（奶牛议会）
F.A.Qs Home Discuss ProblemSet Status Ranklist Contest ModifyUser gryz2016 Logout 捐赠本站 Notice:由于本OJ ...
- struts不同session范围添加、访问属性
第01步:编写bean类 package com.self.bean; import java.util.Date; public class User { private Date birthday ...
- 夺命雷公狗---DEDECMS----1dedecms的安装过程
我们这次要玩的dedecms(cms也就是内容管理系统),电商网.或者政府网..小说网.新闻网之类的都是基于可以用cms来实现的. 现在在市场上主流的cms系统有dedecms(织梦),帝国cms,p ...