基础 - 划过换图

标签：

 结构

<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 {
    width: 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;
    width: 142px;
}
#box li img{
    width: 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);
}

基础 - 划过换图

标签：

原文地址：http://www.cnblogs.com/WeWeZhang/p/5714537.html