Rumah > hujung hadapan web > html tutorial > JS运动学习笔记 任意值的运动框架(高/宽度,背景颜色,文本内容,透明度等)_html/css_WEB-ITnose

JS运动学习笔记 任意值的运动框架(高/宽度,背景颜色,文本内容,透明度等)_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:18:37
asal
1125 orang telah melayarinya

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>任意值的运动框架</title>    <style>        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*/        }    </style>    <script>        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);        }    </script></head><body><div id="div1">变高</div><div id="div2">变宽</div><div id="div3">I Love JavaScript!</div><div id="div4">修改透明度</div></body></html>
Salin selepas log masuk

关于JS运动框架,需要注意的点如下:

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时,点击按钮时文本框内数值的变化。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #div1{            width:100px;            height:50px;            background-color: yellow;        }    </style>    <script>       window.onload = function () {           var oDiv = document.getElementById('div1');           var oBtn = document.getElementById('btn1');           oBtn.onclick = function () {               var speed = 0.5;//               var speed = 0.4;               oDiv.style.width = oDiv.offsetWidth + speed + 'px';               document.getElementById('text1').value = oDiv.offsetWidth;           };       }    </script></head><body><div id="div1"></div><input type="button" id="btn1" value="按钮"><input type="text" id="text1"></body></html>
Salin selepas log masuk

5. 关于定时器:在每次执行运动框架内的定时器之前,应当清除所有定时器,保证每次只有一个定时器在运作,否则多个定时器同时工作会出bug,运行速度越来越快。

6. 当出现相同冗余代码时,可以适当引入参数,简化代码。

 

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan