web前端|html教程
JS运动学习笔记 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）
web前端-html教程
影视cms源码自动采集,合并ubuntu分区教程,power bi 基金爬虫,php删除数据为什么不成功,seo 赚钱项目lzw
任意值的运动框架div { float: left; width: 200px; height: 200px; margin: 20px; background-color: yellow; border: 1px solid black; font-size: 14px; filter: alpha(opacity=30); /*IE*/ opacity: 0.3; /*火狐,chrome*/ }window.onload = function () {//Div变高 var oDiv1 = document.getElementById(div1); oDiv1.onmouseover = function () {startMove(this, height, 400); }; oDiv1.onmouseout = function () {startMove(this, height, 200); };//Div变宽 var oDiv2 = document.getElementById(div2); oDiv2.onmouseover = function () {startMove(this, width, 400); }; oDiv2.onmouseout = function () {startMove(this, width, 200); };//改变文字大小 var oDiv3 = document.getElementById(div3); oDiv3.onmouseover = function () {startMove(this, fontSize, 30); }; oDiv3.onmouseout = function () {startMove(this, fontSize, 14); };//修改透明度 var oDiv4 = document.getElementById(div4); oDiv4.onmouseover = function () {startMove(this, opacity, 100); }; oDiv4.onmouseout = function () {startMove(this, opacity, 30); }; }; //属性值的获取函数 function getStyle(obj, name) { if (obj.currentStyle) {return obj.currentStyle[name]; } else {return getComputedStyle(obj, false)[name]; } }//运动框架 var timer = null; function startMove(obj, attr, iTarget) { //obj代表对象,attr代表目标属性,iTarget代表设定的属性目标值 clearInterval(obj.timer); //每次执行函数之前清除定时器,保证每次只有一个定时器在工作 obj.timer = setInterval(function () {var cur = 0;if (attr == opacity) { //透明度属性的获取 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //Math.round针对IE7出现小数的问题}else { cur = parseInt(getStyle(obj, attr));//非透明度的属性值获取}var speed = (iTarget - cur) / 6;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //向上取整（速度为正值）和向下取整（速度为负值）if (cur == iTarget) { clearInterval(obj.timer); //达到目标值时清除定时器}else { if (attr == opacity) { obj.style.filter = alpha(opacity= + (cur + speed) + ); //IE浏览器 obj.style.opacity = (cur + speed) / 100;//火狐,chrome } else { obj.style[attr] = cur + speed + px; //非透明度属性值 }} }, 30); }
变高
变宽
I Love JavaScript!
修改透明度
游戏源码带手机版,vscode编译哪个键,ubuntu mnt 空,tomcat网站是什么,sqlite3串行模式设置,爬虫5777,友情链接php源码,seo优化5个误区,网站出现苹果cms,注册成功跳转页面模板lzw
关于JS运动框架，需要注意的点如下：
drp分销系统源码下载,ubuntu u盘卡住,微博爬虫技巧,php milion,seo专员推广lzw
1. 透明度和非透明度属性值的获取和赋值需要分开设置；一般属性的单位值为px，透明度没有单位；
2. 透明度有兼容性问题;IE浏览器: filter:alpha(opacity=30); 火狐和chrome: opacity = 0.3; 因为透明度的值为小数，所以获取时需要使用parseFloat方法而非parseInt，后者会将透明度的值取0，从而设置无效；
3. 在IE7下，parseFloat*100得出的值可能为非整数，需要使用Math.round进行四舍五入做兼容处理；
4. speed = iTarget – cur, 得出的值可能为正或为负的小数，如果为正需要向上取整，为负向下取整，如果不进行此操作，将永远无法达到目标值，计算机关于属性值最小计算单位为1px,当 var speed = (iTarget – cur) / 6 的值小于0.5时会被忽略，具体请参考如下例子，当speed=0.4和0.5时，点击按钮时文本框内数值的变化。
Title#div1{ width:100px; height:50px; background-color: yellow; }window.onload = function () { var oDiv = document.getElementById(div1); var oBtn = document.getElementById(tn1); oBtn.onclick = function () {var speed = 0.5;//var speed = 0.4;oDiv.style.width = oDiv.offsetWidth + speed + px;document.getElementById( ext1).value = oDiv.offsetWidth; }; }
5. 关于定时器：在每次执行运动框架内的定时器之前，应当清除所有定时器，保证每次只有一个定时器在运作，否则多个定时器同时工作会出bug，运行速度越来越快。
6. 当出现相同冗余代码时，可以适当引入参数，简化代码。
