js中鼠标悬浮改变图片或内容

来源：互联网发布：阿里云的视频点播服务编辑：程序博客网时间：2024/05/16 08:50

1.改变图片

**css样式***{    margin: 0;    padding: 0;}li{    list-style: none;}#all ul li{    float: left;    display: inline-block;    background-color: #CCCCCC;    margin-right: 3px;    width: 80px;    height: 20px;    text-align: center;    line-height: 20px;}#all ul li.change{    background-color: black;    color:white;}#pic{    width: 300px;    height: 200px;    clear: both;    border: 1px solid;}#img1{    display: block;}#img2,#img3,#img4{    display: none;}

<body>        <div id="all">            <ul>                <li onmouseover="myfrist('img1')" name="a1" >牛奶</li>                <li onmouseover="myfrist('img2')" name="a1">蛋糕</li>                <li onmouseover="myfrist('img3')" name="a1">巧克力</li>                <li onmouseover="myfrist('img4')" name="a1">咖啡</li>            </ul>        </div>            <div id="pic">                <div id="img1" name="p1"><img src="img/fre_0.jpg" width="300" height="200"></div>                <div id="img2" name="p1"><img src="img/fre_1.jpg" width="300" height="200"></div>                <div id="img3" name="p1"><img src="img/fre_2.jpg" width="300" height="200"></div>                <div id="img4" name="p1"><img src="img/fre_3.jpg" width="300" height="200"></div>            </div>    </body>

**script样式**function myfrist(ids){    var pics=document.getElementsByName("p1");    var list=document.getElementsByName("a1");    for(var i=0;i<pics.length;i++){        if(pics[i].id==ids){            pics[i].style.display="block";            list[i].className="change";        }else{            pics[i].style.display="none";            list[i].className="none";        }    }}

2.改变内容

**css样式**body{    margin:0;    }.div_bg{    background-image:url(img/bg.jpg);    background-repeat:no-repeat;    width:169px;    height:290px;    margin-top: 0px;    margin-right: auto;    margin-bottom: 0px;    margin-left: auto;    }td{    font-size:12px;    line-height:20px;    color: #414141;    }.white{font-size:12px;       color:#FFFFFF;       padding-top:2px;       cursor:pointer;       }.white:hover{font-size:12px;             color:#FFFFFF;             padding-top:2px;              cursor:pointer;             }a {    color: #06329b;text-decoration: none;line-height:24px;}a:hover {    color: #cc0000;text-decoration: none;line-height:24px;}.bg{background-image:url(img/menu1.gif);       background-repeat:no-repeat;       height:23px;       width:47px;       text-align:center;}.nobg{background-image:url(img/menu2.gif);       background-repeat:no-repeat;      height:23px;       width:47px;       text-align:center;       }#myTable{    width:145px;    margin-left:auto;    margin-right:auto;}

<body>        <div class="div_bg"><table id="myTable" border="0" cellspacing="0" cellpadding="0">         <tr>            <td style="height:50px;" colspan="3"></td>          </tr>          <tr>            <td id="bg1" class="bg" onmouseover="show('book1')" name="a1"><a class="white"  >小说</a></td>            <td id="bg2" class="nobg"  onmouseover="show('book2')" name="a1"><a class="white" >非小说</a></td>            <td id="bg3" class="nobg" onmouseover="show('book3')" name="a1"><a class="white" >少儿</a></td>          </tr>           <tr>            <td colspan="3" style="padding-top:10px; padding-left:5px; text-align:left;"><div id="book1" name="p1" style="display:block;">                <a  href="#" target=_blank>1.时间旅行者的妻子</a><br>            <a   href="#" target=_blank>2.女心理师（下）</a><br>            <a   href="#" target=_blank>3.鬼吹灯之精绝古城</a><br>            <a   href="#" target=_blank>4.女心理师（上）</a><br>            <a   href="#" target=_blank>5.小时候</a><br>            <a   href="#" target=_blank>6.追风筝的人</a><br>            <a   href="#" target=_blank>7.盗墓笔记2</a><br>            <a   href="#" target=_blank>8.输赢</a>                 </div>            <div id="book2" name="p1" style="display:none;">            <a   href="#" target=_blank>1.人生若只如初见</a><br>            <a   href="#" target=_blank>2.高效能人士的七个..</a><br>            <a   href="#" target=_blank>3.求医不如求己</a><br>            <a   href="#" target=_blank>4.人体使用手册</a><br>            <a   href="#" target=_blank>5.孩子，把你的手给我</a><br>            <a   href="#" target=_blank>6.别笑！我是英文单词书</a><br>            <a   href="#" target=_blank>7.人体经络使用手册</a><br>            <a   href="#" target=_blank>8.股市稳赚</a>                 </div>            <div id="book3" name="p1" style="display:none;">            <a   href="#" target=_blank>1.斯凯瑞金色童书·..</a><br>            <a   href="#" target=_blank>2.哈利·波特与“混..</a><br>            <a   href="#" target=_blank>3.不一样的卡梅拉（..</a><br>            <a   href="#" target=_blank>4.它们是怎么来的</a><br>            <a   href="#" target=_blank>5.五·三班的坏小子..</a><br>            <a   href="#" target=_blank>6.男生日记</a><br>            <a   href="#" target=_blank>7.哈利·波特与魔法石</a><br>            <a   href="#" target=_blank>8.噼里啪啦丛书(全7册)</a>                 </div></td>          </tr>        </table></div>    </body>

**script样式**function show(name){                var ps=document.getElementsByName("p1");                var ass=document.getElementsByName("a1");                for(var i=0;i<ps.length;i++){                    if(ps[i].id==name){                        ps[i].style.display="block";                        ass[i].className="bg";                    }else{                        ps[i].style.display="none";                        ass[i].className="nobg";                    }                }        }

阅读全文

1 0