zoukankan      html  css  js  c++  java
  • 鼠标点击更换背景图片

    <!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:0px;
                margin:0px;
            }
            body{
                background:url(8.jpg)  top center;
            }
            div{
                100%;
                height:150px;
                background-color: pink;
                text-align:center;
                padding-top:50px;
            }
            div img{
                cursor:pointer;
    
            }
    
    
    
        </style>
    
        <script>
            window.onload=function()
            {
                var p1=document.getElementById("p1");
                p1.onclick=function(){
                document.body.style.backgroundImage="url(images/3.jpg)";
                 }
                var p2=document.getElementById("p2");
                p2.onclick=function(){
                    document.body.style.backgroundImage="url(images/4.jpg)";
                }
                var p3=document.getElementById("p3");
                p3.onclick=function(){
                    document.body.style.backgroundImage="url(images/5.jpg)";
                }
            }
        </script>
    
    </head>
    <body>
        <div>
            <img src="3.jpg" alt=""   width="150px"  id="p1"/>
            <img src="4.jpg" alt=""   width="150px"  id="p2"/>
            <img src="5.jpg" alt=""   width="150px"  id="p3"/>
        </div>
    </body>
    </html>
    

      每张图片一点击,整个文档的背景图片就会更换为所点击的图片

      注意,获取body元素 : document.body

  • 相关阅读:
    beego——过滤器
    beego——session控制
    Differentiation 导数和变化率
    验证码识别
    pip 下载慢
    ORB
    决策树
    机器学习第二章 配对网站
    K-近邻算法
    ubuntu下安装配置OpenCV
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/11260800.html
Copyright © 2011-2022 走看看