鼠标展示案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
    <style>
        *{
            padding:0;
            margin:0;
        }
        /*外面的大盒子宽360，高430，有边框*/
        .box{
            width:360px;
            height:430px;
            border:1px solid black;
            margin:100px;

        }
        /*上面的盒子宽360，高359，下面还有1px的边框，最开始有一张背景图*/
     #boxshang{
         width:360px;
         height:359px;
         border-bottom:1px solid black;
         background:url(C:/Users/高萍/Desktop/前端学习/images/01big.jpg) no-repeat center ;
     }
        /*下面鼠标展示区的排版*/
        .boxxia ul{
            list-style:none;
        }
        .boxxia ul li{
            float:left;
        }
    </style>


    <!--js部分，当点击下方5中图片中的任意一张时，该图片会变成上面盒子的背景图片-->
    <script>

         //先写出两个js 效果，找到相同的地方，有几个相同的变量，比较后，封装成函数

        /*window.onload=function() {        //function后面的括号不要丢
            var li05 = document.getElementById("li05");
            var boxshang = document.getElementById("boxshang");
            li05.onmouseover = function () {
                boxshang.style.backgroundImage = "url(C:/Users/高萍/Desktop/前端学习/images/05big.jpg)";
            }

            var li02 = document.getElementById("li02");
            var boxshang = document.getElementById("boxshang");
            li02.onmouseover = function () {
                boxshang.style.backgroundImage = "url(C:/Users/高萍/Desktop/前端学习/images/02big.jpg)";
            }
        }*/

        window.onload=function(){

            var boxshang=document.getElementById("boxshang");       //这一句可以写在函数外面，也可以写在函数里面，但boxshang是不变的，所以写在函数外面更好
            function fn(liid,bg){
                var liid = document.getElementById(liid);   //liid不用加括号，是形参变量
                    liid.onmouseover = function(){
                    boxshang.style.backgroundImage = bg;    //别把bg也写一句  var bg=document.getElementById("bg"),bg 他没有id
                }
            }
                fn("li01" ,"url(C:/Users/高萍/Desktop/前端学习/images/01big.jpg)");   //调用函数的时候，实参一定加引号！！！
                fn("li02", "url(C:/Users/高萍/Desktop/前端学习/images/02big.jpg)");
                fn("li03", "url(C:/Users/高萍/Desktop/前端学习/images/03big.jpg)");
                fn("li04" ,"url(C:/Users/高萍/Desktop/前端学习/images/04big.jpg)");
                fn("li05" ,"url(C:/Users/高萍/Desktop/前端学习/images/05big.jpg)");

            }       //注意不要丢括号！！！

    </script>

</head>
<body>
        一个大盒子，大盒子里面有上下两个盒子，大盒子最开始有一张背景图，下面的盒子中排列着5张图片

        <div class="box">
            <div id="boxshang"></div>

            <div class="boxxia">
                <ul>
                    <li id="li01"><img src="C:/Users/高萍/Desktop/前端学习/images/01.jpg" alt=""/></li>
                    <li id="li02"><img src="C:/Users/高萍/Desktop/前端学习/images/02.jpg" alt=""/></li>
                    <li id="li03"><img src="C:/Users/高萍/Desktop/前端学习/images/03.jpg" alt=""/></li>
                    <li id="li04"><img src="C:/Users/高萍/Desktop/前端学习/images/04.jpg" alt=""/></li>
                    <li id="li05"><img src="C:/Users/高萍/Desktop/前端学习/images/05.jpg" alt=""/></li>
                </ul>
            </div>
        </div>
</body>
</html>
posted @ 2019-07-17 00:29 shanlu 阅读(99) 评论(0) 收藏举报
刷新页面返回顶部
shanlu

鼠标展示案例

公告
