JavaScript—运动基础(1)—#分享侧栏#图片淡入淡出

最新推荐文章于 2024-11-02 12:42:04 发布

fuzuxian

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量152

点赞数 1

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

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

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1. 基础运动

基础运动—javascript
文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础运动</title>
    <style>
        #div1{width: 100px; height:100px;  background: pink; margin: 40px; position:absolute; display: block; left:0px}
    </style>
    <script>
            var Timer=null;
            function StartMove() {
                var oButton=document.getElementById('button1');
                var oDiv=document.getElementById('div1');
                var speed=0.5;

                clearTimeout(Timer);   //  开定时器之前先关掉之前的
                Timer=setInterval(function () {
                    if(oDiv.offsetLeft>=500){
                        clearTimeout(Timer);
                    }else{
                        oDiv.style.left=oDiv.offsetLeft+speed+'px';
                    }
                }, 50)    //  50  控制运动的平滑度
            }
    </script>
</head>
<body>
<input  id="button1" type="button" value="开始运动"  onclick="StartMove()" />
<div id="div1"></div>
</body>
</html>

2. 分享侧栏

分享侧栏—javascript
文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分享侧栏</title>
    <style>
        #div1{width:150px;  height:200px; background: mistyrose;
                position: absolute; left: -150px;}

        #div1  span{width: 20px; height: 70px; background: deepskyblue;
                     position: absolute;  right: -20px; top:75px;     }
    </style>
    <script>
        window.onload=function (ev) {
            var oDiv=document.getElementById('div1');
            oDiv.onmouseover=function (ev1) {
                StartMove(0);
            };
            oDiv.onmouseout=function (ev1) {
                StartMove(-150);
            }
        };
        var Timer=null;
        function StartMove(iTarget){
            var oDiv=document.getElementById('div1');
            var speed=0;
            oDiv.offsetLeft<iTarget ? speed=10:speed=-10;
          
            clearInterval(Timer);
            Timer=setInterval(function () {
                if(oDiv.offsetLeft == iTarget){
                    clearInterval(Timer);
                }else{
                    oDiv.style.left=oDiv.offsetLeft + speed  + 'px'
                }
            }, 30);
        }
    </script>
</head>
<body>
    <div id="div1">
        <span>分享到</span>
    </div>
</body>
</html>

3. 图片淡入淡出

图片淡入淡出
文本：改变透明度

透明度设置： filter:alpha(opacity:30); opacity:0.3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片淡入淡出</title>
    <style>
        #div1{width: 150px;  height:150px; background: red;
                filter:alpha(opacity:30); opacity:0.3}
    </style>
    <script>
        window.onload=function () {
            var oDiv=document.getElementById('div1');
            oDiv.onmouseover=function () {
                StartMove(100);
            };
            oDiv.onmouseout=function () {
                StartMove(30);
            }
        };
        var alpha=30;     //  控制该变量改变透明度
        var Timer=null;
        function StartMove(iTarget) {
            var oDiv=document.getElementById('div1');

            clearInterval(Timer);
            Timer =setInterval(function () {
                var speed=0;
                alpha< iTarget ? speed=2:speed=-2;

                if(alpha == iTarget){    // offsetAlpha
                    clearInterval(Timer);
                }else{
                    alpha+=speed;
                    oDiv.style.filter='alpha(opacity:'  + alpha +  ')';
                    oDiv.style.opacity=alpha/100;
                }
            }, 30);
        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>