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 ...
随机推荐
- 向数据库中导入AWR数据
使用$ORACLE_HOME/rdbms/admin/awrload.sql $ sqlplus '/as sysdba' SQL*Plus: Release Production on Fri No ...
- Java基础之读文件——从文件中读取文本（ReadAString）
控制台程序,使用通道从缓冲区获取数据,读取Java基础之写文件(BufferStateTrace)写入的charData.txt import java.nio.file.*; import java ...
- Servlet 3特性：异步Servlet
解异步Servlet之前,让我们试着理解为什么需要它.假设我们有一个Servlet需要很多的时间来处理,类似下面的内容: LongRunningServlet.java package com.jou ...
- PAT 解题报告 1048. Find Coins (25)
1048. Find Coins (25) Eva loves to collect coins from all over the universe, including some other pl ...
- Redis认识
摘要:认识Redis 1.安装Redis npm install redis 2.Redis使用 var redis = require("redis"), client = re ...
- Lintcode: Maximum Subarray III
Given an array of integers and a number k, find k non-overlapping subarrays which have the largest s ...
- (转)json+flexgrid+jbox组合运用页面刷新<jsp>
插件效果 1.JSP页面 1 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
- MySQL编码问题
client 下的default_character_set=utf8; 它是需要的,可是它的作用是干吗的? 它的作用等同执行以下3个命令 SET character_set_client = utf ...
- 2-sat（and,or,xor）poj3678
Katu Puzzle Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7949 Accepted: 2914 Descr ...
- 查看linux [Fedora] 系统信息
系统版本: $ /etc/issue Fedora release (Heisenbug)或者$ cat /etc/issue 系统位数: $ getconf LONG_BIT64 内核信息: $ c ...