事件三要素（实例）

最新推荐文章于 2022-11-18 11:53:02 发布

John_boom

最新推荐文章于 2022-11-18 11:53:02 发布

阅读量1.9k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/John_boom/article/details/78012798

版权

Javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

换肤效果制作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0}
        body {
            background: url(images/1.jpg) top center;
        }
        .box {
            height: 150px;
            background: rgba(255,255,255,.3);
            text-align: center;
            padding-top:50px;
        }
        .box img {
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function(){
            /*要做事，先找人*/
            var pic1 = document.getElementById("pic1");
            var pic2 = document.getElementById("pic2");
            var pic3 = document.getElementById("pic3");
            pic1.onclick = function(){
                document.body.style.backgroundImage = "url(images/1.jpg)";
            }
            pic2.onclick = function(){
                document.body.style.backgroundImage = "url(images/2.jpg)";
            }
            pic3.onclick = function(){
                document.body.style.backgroundImage = "url(images/3.jpg)";
            }
        }
    </script>
</head>
<body>
<div class="box">
    <img src="images/1.jpg" alt="" width="150" id="pic1"/>
    <img src="images/2.jpg" alt="" width="150" id="pic2"/>
    <img src="images/3.jpg" alt="" width="150" id="pic3"/>
</div>
</body>
</html>

效果图：
这里写图片描述

京东网页改进：

①登录弹出界面：

    <script type="text/javascript">
        window.onload = function(){
             //事件源:  登录
            var login = document.getElementById("login");
            var mask = document.getElementById("mask");
            var box = document.getElementById("box");
            login.onclick = function(){
               // 当我们点击登录，会弹出灰色的大盒子和白色的小盒子
                mask.style.display = "block";
                box.style.display = "block";
            }
           // 事件源 span x
            var close_all = document.getElementById("close_all");
            close_all.onclick = function(){
                mask.style.display = 'none';
                box.style.display = "none";
            }
        }
    </script>

广告栏点击关闭：

<script>
    /*事件源： a
    事件  点击
    事件处理程序   topbanner 这个隐藏的意思*/
    /*要做事，先找人*/
    var jd_close = document.getElementById("jd_close"); // 得到a
    var topBanner = document.getElementById("top_banner"); // 得到大的
    //事件源.事件 = function(){}
    jd_close.onclick = function(){
        topBanner.style.display = "none";
    }
</script>

切换轮播图（简陋版）：

<script>
         var arr = document.getElementById("arr");   //两个三角
         var slide = document.getElementById("slide");  // 轮播图的盒子
         slide.onmouseover = function(){
             arr.style.display = "block";  // 显示三角
         }
         slide.onmouseout = function(){
             arr.style.display = "none";  // 显示三角
         }

         var li02 = document.getElementById("li02");
         var li01 = document.getElementById("li01");
         var pic = document.getElementById("pic");
         li02.onmouseover = function(){
             pic.src = "images/22.jpg";
         }
         li01.onmouseover = function(){
             pic.src = "images/11.jpg";
         }
    </script>

John_boom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
事件三要素（实例）

①换肤<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0} body { background: url(images/1.jpg) top center;
复制链接

扫一扫

专栏目录