切换鼠标显示图片

最新推荐文章于 2024-07-11 20:55:36 发布

chiguang1213

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量94

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3696728/blog/1591228

版权

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
   <style type="text/css">
       *{margin: 0;padding:0}
       ul{list-style:none;}
       #box {
height: 70px;
width: 360px;
padding-top: 360px;
border:1px solid #ccc;
margin:100px auto;
overflow: hidden;
background: url(images/01big.jpg) no-repeat;
}
#box ul{
overflow: hidden;
border-top:1px solid #ccc;
}
#box li {
float: left;
}
   </style>
   <script type="text/javascript">
       window.onload = function(){
           var box = document.getElementById("box");
           function fn(lidi,gr){
var obj = document.getElementById(lidi);
obj.onmouseover = function(){
    box.style.backgroundImage = gr;
}
           }
       fn("li01","url(images/01big.jpg)");// 实参调用函数
fn("li02","url(images/02big.jpg)");
fn("li03","url(images/03big.jpg)");
fn("li04","url(images/04big.jpg)");
fn("li05","url(images/05big.jpg)");