Javscript复习第四天鼠标事件

来源：互联网发布：淘宝店铺卖充值好吗编辑：程序博客网时间：2024/05/21 10:26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Document</title>    <script>    //鼠标移入元素时的操作    function mouseOver(){        var mouse = document.getElementById('onmouse');        mouse.src = "./images/on.gif";    }    //鼠标移出元素时的操作        function mouseOut(){        var mouse = document.getElementById('onmouse');        mouse.src = "./images/off.gif";    }       //鼠标按下元素时的操作    function mouseDown(){        var mouse = document.getElementById('imgtoggle');        mouse.style.backgroundPosition = "-61px 115px";    }    //鼠标松开元素时的操作    function mouseUp(){        var mouse = document.getElementById('imgtoggle');        mouse.style.backgroundPosition = "-61px 0px";    }       </script>    <style>        #imgtoggle{            width:106px;            height: 106px;            background: url(./images/1.png);            background-position:-61px 0px;        }    </style></head><body>    <p><b>onmouseover&&onmouseout 鼠标移入元素或移出元素</b></p>    <p>鼠标经过，灯就会被点亮喔1~</p>    <img src="./images/off.gif" alt="" id = "onmouse" onmouseover="mouseOver();" onmouseout ="mouseOut();"/>    <hr />    <p><b>onmouseDown&&onmouseup 鼠标移入按下或松开元素</b></p>    <p><b>鼠标按下我：我就会变白哦~</b></p><div id = "imgtoggle" onmousedown = "mouseDown();" onmouseup="mouseUp();"></div></body></html>
这里写图片描述
0 0