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 ...
随机推荐
- java.net.BindException: Address already in use: JVM_Bind
是端口占用,如果修改端口后仍提示这样的错误,可能是eclipse自动关闭或正在运行服务非正常中断导致端口没有关闭,这时你再启动,还是提示java.net.BindException: Address ...
- wpf 面试题目
初级工程师 解释什么是依赖属性,它和以前的属性有什么不同?为什么在WPF会使用它?什么是样式什么是模板绑定(Binding )的基础用法解释这几个类的作用及关系: Visual, UIElement, ...
- SQL Server中使用正则表达式
SQL Server 2005及以上版本支持用CLR语言(C# .NET.VB.NET)编写过程.触发器和函数,因此使得正则匹配,数据提取能够在SQL中灵活运用,大大提高了SQL处理字符串,文本等内容 ...
- LIS 最长递增子序列
一.最长公共子序列 经典的动态规划问题,大概的陈述如下: 给定两个序列a1,a2,a3,a4,a5,a6......和b1,b2,b3,b4,b5,b6.......,要求这样的序列使得c同时是这两个 ...
- 成员变量&&局部变量
一.相同点:1.都遵循变量的声明格式:(修饰符) 数据类型 变量名=初始化值 2.都有各自的作用域 二.不同点:1.声明的位置不同 成员变量:声明在类内,方法外. 局部变量:声明在方法内. ...
- 简单分组背包ACboy needs your help（hdu1712）
题意:有n个任务,完成期限是m天,a[i][j]代表第i个任务用j天完成可以获得的利益,问在这m天里面可以获得的最大利益,每次只能做一个任务,即多个任务不能同时做; 分析;用dp[i][j]代表在做第 ...
- [转]JAVA程序员一定知道的优秀第三方库（2016版）
原文地址:http://blog.csdn.net/zxc123e/article/details/51418163 几乎每个程序员都知道要“避免重复发明轮子”的道理——尽可能使用那些优秀的第三方框架 ...
- js正则表达式进行格式校验
今天做了个js正则表达式的练习,利用正则表达式进行注册信息格式验证,注册信息界面如下: 格式要求: 1.学号项不能为空,必须为纯数字,不能与数据库中的重复,正则表达式/^\d+$/g: 2.姓名项不能 ...
- （七）DAC0832 数模转换芯片的应用 以及运算放大器的学习 01
DAC0832是8分辨率的D/A转换集成芯片.与微处理器完全兼容.这个DA芯片以其价格低廉.接口简单.转换控制容易等优点,在单片机应用系统中得到广泛的应用.D/A转换器由8位输入锁存器.8位DAC寄存 ...
- kafka0.8.2以下版本删除topic
一些说明 kafka0.8.2及以上版本已经支持delete命令删除topic,可是之前的版本要是想删除topic还是要费一番手脚,绝对是个体力活... 该方法最好仅在线下开发环境中使用,毕竟要重启z ...