Js控制鼠标滑动图片

来源：互联网发布：左小祖咒火葬场知乎编辑：程序博客网时间：2024/05/17 01:38

<div class="all" id="all">    <img src="./images/mi.png" id="mi">    <div id="up"></div>    <div id="down"></div></div>

<style type="text/css">        *{            padding: 0;            margin: 0;        }        .all{            width: 512px;            height: 400px;            margin: 100px auto;            overflow: hidden;            position: relative;        }        #up{            width: 512px;            height: 200px;            position: absolute;top:0px;        }        #down{            width: 512px;            height: 200px;            position: absolute;bottom: 0px;        }        #mi{            position: absolute;        }    </style>

<script type="text/javascript">    window.onload = function(){        function $(id) {            return document.getElementById(id);        }        var num = 0;        var timer = null;        // //控制图片向上移动        $("up").onmouseover = function (){            timer = setInterval(fun,30);                function fun(){                    num-=2;                if(num<-1070){                    clearInterval(timer);                }else{                    $("mi").style.top=num+"px";                }            }        }         //控制图片向下移动        $("down").onmouseover = function (){            timer = setInterval(fun,30);                function fun(){                    num+=2;                if(num>0){                    clearInterval(timer);                }else{                    $("mi").style.top=num+"px";                }                }        }        //鼠标移走后图片停止移动        $("all").onmouseout = function(){            clearInterval(timer);        }    }    </script>

这里写图片描述

阅读全文

0 0