web中鼠标的点击事件

来源:互联网 发布:广告机发布软件 编辑:程序博客网 时间:2024/06/08 11:16
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>商品展示</title>    <style>        body,img{            margin:0px;            padding: 0px;        }        body{            margin: 100px auto 0px auto;            background-image: url("./images/01big.jpg");            background-repeat: no-repeat;            background-position: center;        }        .box{            width:366px;            height:70px;            margin: 435px auto 0px auto;            cursor: pointer;        }        .box img{            width: 70px;        }    </style>    <script>        function $(id){            return document.getElementById(id);        }        window.onload = function(){            $('img1').onmousemove = function(){                document.body.style.backgroundImage = "url('./images/01big.jpg')";            }            $('img2').onmousemove = function(){                document.body.style.backgroundImage = "url('./images/02big.jpg')";            }            $('img3').onmousemove = function() {                document.body.style.backgroundImage = "url('./images/03big.jpg')";            }            $('img4').onmousemove = function(){                document.body.style.backgroundImage = "url('./images/04big.jpg')";            }            $('img5').onmousemove = function(){                document.body.style.backgroundImage = "url('./images/05big.jpg')";            }        }    </script></head><body>    <div id="bigbox"></div>    <div class="box">        <img src="./images/01.jpg" alt="" id="img1">        <img src="./images/02.jpg" alt="" id="img2">        <img src="./images/03.jpg" alt="" id="img3">        <img src="./images/04.jpg" alt="" id="img4">        <img src="./images/05.jpg" alt="" id="img5">    </div></body></html>