仿银泰网，旗舰店品牌图片展示

最新推荐文章于 2021-11-14 23:27:43 发布

最新推荐文章于 2021-11-14 23:27:43 发布 · 187 阅读

文章标签：

#jquery #ViewUI

jquery 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一个模仿银泰网的品牌图片展示效果的实现方案，该方案使用了jQuery进行DOM操作，实现了品牌图片的自动切换及鼠标悬停交互效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
padding:0;
margin:0;
}
a{
text-decoration:none;
}
img{
border:none;
}
ul{
list-style:none;
}
body{
text-align:center;
margin-top:10px;
}
#outDiv{
margin:0 auto;
background:url(el-bg.jpg);
background-repeat:no-repeat;
background-position:center top;
text-align:center;
background-color:#333;
}
#container{
width:890px;
height:565px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
#container dl dd{
float:left;
position:relative;
padding-left:2px;
}
#container dl dd li{
position:relative;
width:210px;
height:410px;
padding-left:5px;
padding-right:5px;
display:block;
top:-124px;
}
.img{
position:absolute;
top:0;
left:0;
}
img.active{
opacity:1;
filter:alpha(opacity=100);
}
.hImg{
position:absolute;
top:0;
left:0;
opacity:0;
filter:alpha(opacity=0);
}
li.evenLi{
top:0px;
}
li.ordLi{
top:-248px;
}
</style>
</head>

<body>
<div id="outDiv">
   <div id="container">
      <dl>
      <dd>
      <ul>
      <li>
         <a href="#">
         <img src="jj.jpg" class="img" />
      <img src="jj-h.jpg" class="hImg" />
      </a>
      </li>
      <li>
         <a href="#">
         <img src="only.jpg" class="img" />
      <img src="only-h.jpg" class="hImg" />
      </a>
      </li>
   </ul>
   </dd>
   <dd>
      <ul>
      <li>
         <a href="#">
         <img src="gly.jpg" class="img" />
      <img src="gly-h.jpg" class="hImg" />
      </a>
      </li>
      <li>
         <a href="#">
         <img src="vm.jpg" class="img" />
      <img src="vm-h.jpg" class="hImg" />
      </a>
      </li>
   </ul>
   </dd>
   <dd>
      <ul>
      <li>
         <a href="#">
         <img src="el.jpg" class="img" />
      <img src="el-h.jpg" class="hImg" />
      </a>
      </li>
      <li>
         <a href="#">
         <img src="gzm.jpg" class="img" />
      <img src="gzm-h.jpg" class="hImg" />
      </a>
      </li>
   </ul>
   </dd>
   <dd>
      <ul>
      <li>
         <a href="#">
         <img src="st.jpg" class="img" />
      <img src="st-h.jpg" class="hImg" />
      </a>
      </li>
      <li>
         <a href="#">
         <img src="nb.jpg" class="img" />
      <img src="nb-h.jpg" class="hImg" />
      </a>
      </li>
   </ul>
   </dd>
   </dl>
   </div>
   <div id="test"></div>
</div>
<div id="t"></div>
<script type="text/javascript">
/*
* 仿银泰网，旗舰店品牌图片展示；
* ie8,ff,chrome浏览器中测试可用，其余浏览器未测；
* ******made by keimon*********
* ********2013-01-12**********
*/
$(function(){
var len = $('#container dl dd li').length;
var $li = $('#container dl dd li')
//公用方法；
function gongyong(randomNum){
     $('#t').html(randomNum);
$('#container dl dd li').stop().animate({top:'-124px'},'slow');
     //同个ul下的两个li的处理
if(randomNum%2==1){
     $li.eq(randomNum).add($li.eq(randomNum-1))
     .stop().animate({top:'-248px'},'slow');
}else{
     $li.eq(randomNum).add($li.eq(randomNum+1))
     .stop().animate({top:'0px'},'slow');
}
//切换背景
var nameLen=$li.eq(randomNum).find('.img')
                 .attr('src').indexOf('.');
var name = $li.eq(randomNum).find('.img')
                .attr('src').substring(0,nameLen);
var bgName = name+'-bg.jpg';
$('#outDiv').css('backgroundImage','url('+bgName+')');
//黑白变彩色
$li.eq(randomNum).parents().find('.hImg').removeClass('active')
$li.eq(randomNum).find('.hImg').addClass('active');
}

function showHImg(){
     var randomNum = Math.ceil(Math.random()*(len-1));
gongyong(randomNum);
timer = setTimeout(function(){
     showHImg();
},2000)
}
showHImg()

for(var i=0; i<len; i++){
     $li.eq(i).hover(function(){
     var items = this;
  var index = $li.index(items);
     clearTimeout(timer);
  gongyong(index);
},function(){
     showHImg();
})
}
})
</script>
</body>
</html>