商品展示初学者

最新推荐文章于 2021-11-05 18:05:39 发布

weixin_30678349

最新推荐文章于 2021-11-05 18:05:39 发布

阅读量111

点赞数

文章标签： php javascript ViewUI

原文链接：http://www.cnblogs.com/verayangnakiss/p/8455661.html

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   .box{
    width: 520px;
    height: 600px;
    margin: 0 auto;
   }
   .big{
    width:520px;
    height: 450px;
    border: dashed 1px grey;
    background: url(img/11.png);
   }
   .small{
    /*width: 600px;*/
    height: 150px;
    overflow: hidden;
   }
   .small li{
    float: left;
    list-style: none;
    border: solid 1px black;
   }
  </style>
  <script type="text/javascript">
   window.onload = function(){
    var obig = document.getElementById('big');
    function fn(liid,bg){
     var OS = document.getElementById(liid);
     OS.onmouseover = function(){

      obig.style.backgroundImage = bg;
     }
    }
    fn('li01','url(img/11.png)');
    fn('li02','url(img/3 (1).png)');
    fn('li03','url(img/4.png)');
    fn('li04','url(img/5.png)');

   }
  </script>
</head>
<body>
  <div class="box">
      <div class="big" id="big">

      </div>
      <div class="small">
      <ul>
        <li id="li01"><img src="img/11.png" /></li>
        <li id="li02"><img src="img/3 (1).png" /> </li>
        <li id="li03"><img src="img/4.png"/></li>
        <li id="li04"><img src="img/5.png" /> <li>
      </ul>
      </div>
  </div>
    </body>
</html>