事件三要素(实例)

换肤效果制作


<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>

你可能感兴趣的:(Javascript)