JavaScript—运动进阶—# 鼠标移动改变多个Div宽度 # 多个Div淡入淡出 # 变宽/变高/变字体大小/变边框大小/变透明度

最新推荐文章于 2023-05-17 14:43:36 发布

fuzuxian

最新推荐文章于 2023-05-17 14:43:36 发布

阅读量381

点赞数 2

分类专栏： JavaScript 文章标签： js css javascript 前端

本文链接：https://blog.csdn.net/image_fzx/article/details/103747976

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1，鼠标移动改变多个Div宽度

鼠标移动改变多个Div宽度
文本：
oDiv[i].Timer 每个Div都加一个定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个Div，鼠标移动改变宽度</title>
    <style>
        div {width: 80px; height: 50px; background: pink;  margin: 10px;}
    </style>
    <script>

        window.onload=function (ev) {
            var oDiv=document.getElementsByTagName('div');

            for(var i=0; i<oDiv.length; i++){
                oDiv[i].Timer = null;               //   !!!   oDiv[i].Timer   每个都加一个定时器
                oDiv[i].onmouseover=function () {
                    StartMove(this, 400);
                };
                oDiv[i].onmouseout=function () {
                    StartMove(this, 80);
                }
            }
        };
        //  var Timer = null;
        function StartMove(obj, iTarget) {
            clearInterval(obj.Timer);
            obj.Timer = setInterval(function () {
                var speed=(iTarget-obj.offsetWidth)/6;
                speed=speed>0 ? Math.ceil(speed):Math.floor(speed);

                if( obj.style.width >= iTarget){
                    clearInterval(obj.Timer);
                }else{
                    obj.style.width= obj.offsetWidth + speed + 'px';}
            }, 30);
        }
    </script>
</head>
<body>
    <div>Cookie_fzx</div>
    <div>Cookie_fzx</div>
    <div>Cookie_fzx</div>
    <div>Cookie_fzx</div>
</body>
</html>

2，多个Div淡入淡出

多个Div淡入淡出
文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个Div淡入淡出</title>
    <style>
        div{width:100px; height: 100px; background: red; float: left; margin: 20px;  
            filter: alpha(opacity:30); opacity: 0.3;}
    </style>
    <script>
        window.onload=function () {
            var aDiv=document.getElementsByTagName('div');
            for(var i=0; i< aDiv.length; i++){
                aDiv[i].alpha=30;                  //  aDiv[i].alpha   每个都设置一个变量
                aDiv[i].Timer=null;
                aDiv[i].onmouseover=function () {
                    StartMove(this, 100);
                };
                aDiv[i].onmouseout=function () {
                    StartMove(this, 30);
                };
            }
        };
   //     var alpha=30;
        function StartMove(obj, iTarget) {
            clearInterval(obj.Timer);
            obj.Timer=setInterval(function () {
                var speed=(iTarget-obj.alpha)/6;
                speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);

                if(obj.alpha ==iTarget){
                    clearInterval(obj.Timer);
                }else {
                    obj.alpha+=speed;
                    obj.style.filter="alpha(opcity:" + obj.alpha + ")";
                    obj.style.opacity=obj.alpha/100;
                }
            }, 30);
        }
    </script>
</head>
<body>
<div>Cookie_fzx</div>
<div>Cookie_fzx</div>
<div>Cookie_fzx</div>
<div>Cookie_fzx</div>
</body>
</html>

3，变宽 / 变高 / 变字体大小 /变边框大小

变宽/变高/变字体大小/变边框大小——javascript
文本：
obj.offsetWidth 获取的是盒子模型的宽度，包括 width，borderWidth，padding相加之和。
因此使用 getComputedStyle(obj, false)[name] 获取样式属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变宽/变高/变字体大小/变边框大小</title>
    <style>
        div{width:100px; height: 100px; background: pink; float: left; margin: 20px;
            border: 5px solid green;  font-size: 14px;}
    </style>
    <script>
        window.onload=function () {
            //  变高
            var oDiv1=document.getElementById('div1');
             oDiv1.Timer=null;
             oDiv1.onmouseover=function () {
                 StartMove(this,'height', 250);
             };
             oDiv1.onmouseout=function () {
                 StartMove(this,'height', 100);
             };

            //   变宽
            var oDiv2=document.getElementById('div2');
            oDiv2.Timer=null;
            oDiv2.onmouseover=function () {
                StartMove(this,'width', 250);
            };
            oDiv2.onmouseout=function () {
                StartMove(this,'width', 100);
            };

            //  变字体大小
            var oDiv3=document.getElementById('div3');
            oDiv3.Timer=null;
            oDiv3.onmouseover=function () {
                StartMove(this,'font-size', 30);
            };
            oDiv3.onmouseout=function () {
                StartMove(this,'font-size', 14);
            };

            //  变边框大小
            var oDiv4=document.getElementById('div4');
            oDiv4.Timer=null;
            oDiv4.onmouseover=function () {
                StartMove(this,'borderWidth', 60);
            };
            oDiv4.onmouseout=function () {
                StartMove(this,'borderWidth', 5);
            };
        };
        
        function getStyle(obj, name) {
            if(obj.currentStyle){
                return currentStyle[name];
            }else{
                return getComputedStyle(obj, false)[name];
            }
        }

        function StartMove(obj, attrStyle, iTarget) {
            clearInterval(obj.Timer);
            obj.Timer=setInterval(function () {
                var curStyle=parseInt(getStyle(obj,attrStyle));    //   getStyle(obj,width)不对；   parseInt(getStyle(obj,'width'))对的
                var speed=(iTarget-curStyle)/6;
                speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);

                if(curStyle == iTarget){
                    clearInterval(obj.Timer);
                }else {
                    obj.style[attrStyle]= curStyle+ speed + 'px';   // obj.style.attrStyle不对；   obj.style[attrStyle]对的
                }
            }, 30);
        }
    </script>
</head>
<body>
<div  id="div1" >Cookie_fzx变高</div>
<div  id="div2">Cookie_fzx变宽-_-</div>
<div  id="div3">Cookie_fzx变字体大小</div>
<div  id="div4">Cookie_fzx变边框大小</div>
</body>
</html>

变宽/变高/变字体大小/变边框大小/变透明度
改变 StartMove（）函数

    function StartMove(obj, attrStyle, iTarget) {
            clearInterval(obj.Timer);
            obj.Timer=setInterval(function () {
                //  获取样式的值
                var curStyle=0;    //   getStyle(obj,width)不对；   parseInt(getStyle(obj,'width'))对的
                if(attrStyle == 'opacity'){
                    curStyle=Math.round(parseFloat(getStyle(obj, attrStyle))*100);   //  四舍五入变整数
                }else{
                    curStyle=parseInt(getStyle(obj, attrStyle));
                }
                //  设置 速度
                var speed=(iTarget-curStyle)/6;
                speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
				// 设置间隔定时器
                if(curStyle == iTarget){
                    clearInterval(obj.Timer);
                }else {

                    if(attrStyle == 'opacity'){
                        obj.style.filter='filter: alpha(opacity: ' + (speed+curStyle) + ')';
                        obj.style.opacity= (speed+curStyle)/100;
                    }else{
                        obj.style[attrStyle]= curStyle+ speed + 'px';   // obj.style.attrStyle不对；   obj.style[attrStyle]对的
                    }
                }
            }, 30);

fuzuxian

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript—运动进阶—# 鼠标移动改变多个Div宽度 # 多个Div淡入淡出 # 变宽/变高/变字体大小/变边框大小/变透明度

1，鼠标移动改变多个Div宽度文本：oDiv[i].Timer 每个Div都加一个定时器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多个Div，鼠标移动改变宽度</title> <style...
复制链接

扫一扫

专栏目录