js笔记---（运动）通用的move方法，兼容透明度变化
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
/*#div1{ height:100px; width:100px; position:absolute; --left:800px; margin-top:90px; background-color:red;}
span { height:300px; width:1px; position:absolute; left:500px; background-color:black; }*/
div { height:100px; width:100px; margin-top:50px; background-color:red; }
</style>
<script type="text/javascript">
window.onload = function () {
//var oBtn = document.getElementById('btn1');
//oBtn.onclick = function () {
// starMove(400);
//}
var oDiv = document.getElementsByTagName('div');
//var i = 0;
//for (i = 0; i < oDiv.length; i++) { //}
oDiv[0].onmouseover = function () {
starMove(this, 'width', 300);
}
oDiv[0].onmouseout = function () {
starMove(this, 'width', 100);
}
oDiv[1].onmouseover = function () {
starMove(this, 'height', 300);
}
oDiv[1].onmouseout = function () {
starMove(this, 'height', 100);
}
oDiv[2].onmouseover = function () {
starMove(this, 'opacity', 30);
}
oDiv[2].onmouseout = function () {
starMove(this, 'opacity', 100);
}
}
window.onscroll = function () {
var scroTop = document.documentElement.scrollHeight || document.body.scrollTop;
}
//获取样式数值
function getStyle(obj, attr)
{
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
return getComputedStyle(obj, false)[attr];
}
} var iSpeed=0;
function starMove(obj,attr,iTarget)
{
clearInterval(obj.timer);
var iCur = 0;
obj.timer = setInterval(function () {
//parseInt(parseFloat(getStyle(obj, attr)) * 100)中 parseFloat(getStyle(obj, attr)为取带小数的opacity值
//parseInt(...) 目的为 解决计算机小数问题bug 防止3.0000000000001=3 类似问题
iCur = attr == "opacity" ? parseInt(parseFloat(getStyle(obj, attr)) * 100) : parseInt(getStyle(obj, attr));
//iCur = parseInt(getStyle(obj, attr));
iSpeed =(iTarget - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur == iTarget) {
clearInterval(obj.timer);
} else {
if (attr == "opacity") {
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px';
} }
}, 30);
}
</script>
</head>
<body>
<!--<input type="button" id="btn1" value="开始" /><br />
<div id="div1"></div>
<span></span>-->
<div></div>
<div></div>
<div></div>
</body>
</html>
js笔记---（运动）通用的move方法，兼容透明度变化的更多相关文章
- js笔记---封装自己的Ajax方法
//地址 成功方法 失败方法function Ajax(url, funsucc, funfial) { var oAjax = null; if (window.XMLHttpRequest) { ...
- js笔记----(运动)分享 隐藏/显示
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- js笔记-0
#js笔记-0 数组: indexOf方法: Array也可以通过indexOf()来搜索一个指定的元素的位置: var arr = [10, 20, '30', 'xyz']; arr.indexO ...
- [Effective JavaScript 笔记]第51条：在类数组对象上复用通用的数组方法
前面有几条都讲过关于Array.prototype的标准方法.这些标准方法被设计成其他对象可复用的方法,即使这些对象并没有继承Array. arguments对象 在22条中提到的函数argument ...
- Asp.Net实现JS前台带箭头的流程图方法总结！（个人笔记，信息不全）
Asp.Net实现JS前台带箭头的流程图方法总结!(持续更新中) 一.返回前台json格式 json5 = "[{\"Id\":2259,\"Name\&quo ...
- js笔记（3）--js实现数组转置（两种方法）
js实现数组转置 第一种方法: <script> window.onload=function(){ var array1=[[11,22,33,333],[4 ...
- JavaScript手札：《编写高质量JS代码的68个有效方法》（一）（1~5）
编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...
- 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
提醒大家,Object.prototype.toString().call(param)返回的[object class]中class首字母是大写,像JSON这种甚至都是大写,所以,大家判断的时候可以 ...
- [js笔记整理]事件篇
一.事件流1.冒泡事件:从特定的事件到不特定事件依次触发:(由DOM层次的底层依次向上冒泡)(1)示例: <html onclick="add('html<br>')&qu ...
随机推荐
- 查看进程的io
linux系统上可以使用(centos 2.6.18-144开始支持),dstat版本至少是:dstat-0.6.7-1.rf.noarch.rpm安装wget -c http://linux.web ...
- 浅谈C#抽象方法、虚方法、接口
每次写博客,第一句话都是这样的:程序员很苦逼,除了会写程序,还得会写博客!当然,希望将来的一天,某位老板看到此博客,给你的程序员职工加点薪资吧!因为程序员的世界除了苦逼就是沉默.我眼中的程序员大多都不 ...
- fifo manage
typedef struct { TEntry *header; TEntry *tailer; uint16 alloc; uint16 release;}TPoolCtrl;
- docker offical docs:Working with Containers
enough ---------------------------------------------------------------------------------- Working wi ...
- mysql：on duplicate key update与replace into
在往表里面插入数据的时候,经常需要:a.先判断数据是否存在于库里面:b.不存在则插入:c.存在则更新 一.replace into 前提:数据库里面必须有主键或唯一索引,不然replace into ...
- 【转】Tomcat7启动的总过程 (有时间自己写下tomcat8的)
首先,说明tomcat8和tomcat7的启动过程不一样,这篇是针对tomcat7的. Tomcat启动的总过程 通过上面的介绍,我们总体上清楚了各个组件的生命周期的各个阶段具体都是如何运作的.接下来 ...
- Leetcode: Random Pick Index
Given an array of integers with possible duplicates, randomly output the index of a given target num ...
- Codeforce Round #225 Div2
这回的C- -,弄逆序,我以为要弄个正的和反的,没想到是等价的,弄两个还是正确的,结果我又没注意1和0只能指1个方向,结果弄了4个,取了4个的最小值就错了,自己作死没弄出来...,后面又玩去了...哎 ...
- Facebook Hacker Cup 2014 Qualification Round
2014 Qualification Round Solutions 2013年11月25日下午 1:34 ...最简单的一题又有bug...自以为是真是很厉害! 1. Square Detector ...
- csuoj 1390: Planting Trees
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1390 1390: Planting Trees Time Limit: 1 Sec Memory ...