zoukankan      html  css  js  c++  java
  • 基础

    
    
    <div id="box">
        <ul>
            <li id="img01"><img src="http://img1.mm131.com/pic/1472/1.jpg" alt=""></li>
            <li id="img02"><img src="http://img1.mm131.com/pic/1472/2.jpg" alt=""></li>
            <li id="img03"><img src="http://img1.mm131.com/pic/1472/3.jpg" alt=""></li>
            <li id="img04"><img src="http://img1.mm131.com/pic/1472/4.jpg" alt=""></li>
            <li id="img05"><img src="http://img1.mm131.com/pic/1472/5.jpg" alt=""></li>
        </ul>
    </div>
    
    
    

      

    * {
        margin: 0;
        padding: 0;
    }
    #box {
         710px;
        height: 195px;
        padding-top: 1060px;
        border: 5px solid #C81623;
        margin: 0 auto;
        background: #666666 url(http://img1.mm131.com/pic/1472/1.jpg) no-repeat 5px 5px;
    }
    #box ul {
        overflow: hidden;
        list-style: none;
        padding: 0;
    }
    #box li {
        float: left;
         142px;
    }
    #box li img{
         90%;
        padding: 0 8px;
    }
    

      

    window.onload = function () {
        var oBox = window.document.getElementById("box");
        function weChangeBg(imgIndex,index) {
            var oImg = window.document.getElementById(imgIndex);
            oImg.onmouseover = function () {
                oBox.style.backgroundImage = "url(http://img1.mm131.com/pic/1472/"+index+".jpg)";
            }
        }
        weChangeBg("img01",1);
        weChangeBg("img02",2);
        weChangeBg("img03",3);
        weChangeBg("img04",4);
        weChangeBg("img05",5);
    }
    

      

  • 相关阅读:
    JQuery 快速入门一篇通
    Winform 显示Gif图片
    MD5编码工具类 MD5Code.java
    Asp.Net 上传图片并生成高清晰缩略图
    winform时钟c#代码
    PHP面试题汇总
    PHP条件语句语法与示例
    Android声音播放实例代码
    html和js基础功能代码备份
    纯C#实现屏幕指定区域截屏
  • 原文地址:https://www.cnblogs.com/WeWeZhang/p/5714537.html
Copyright © 2011-2022 走看看