淘宝网商品展示效果

稿源：互联网 2022-04-02 21:43:02 点击： 16337 撤稿纠错

排行榜展示效果，鼠标经过显示详细信息。

以下讨论的是和排行产品展示相关的淘宝网商品展示效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 漂亮的淘宝网商品展示效果 站长特效网欢迎您。</title>
<style type="text/css">
BODY {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; TEXT-ALIGN: left
}
UL {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
IMG {
 BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
.www_zzjs_net .zzjs_net {
 BACKGROUND-IMAGE: url(/img/T10oNhXlHZedPC95UP-230-300.png); BACKGROUND-REPEAT: no-repeat
}
.www_zzjs_net .zzjs_net LI {
 BACKGROUND-IMAGE: url(/img/T10oNhXlHZedPC95UP-230-300.png); BACKGROUND-REPEAT: no-repeat
}
.tabcontent LI.cur {
 BACKGROUND-IMAGE: url(/img/T10oNhXlHZedPC95UP-230-300.png); BACKGROUND-REPEAT: no-repeat
}
.tabcontent LI I {
 BACKGROUND-IMAGE: url(/img/T15oNhXfY0edP3Uhgj-60-100.gif); BACKGROUND-REPEAT: no-repeat
}
.www_zzjs_net .zzjs_net {
 BACKGROUND-POSITION: 0px -37px; PADDING-LEFT: 10px; WIDTH: 220px; COLOR: #640000; LINE-HEIGHT: 30px; HEIGHT: 30px
}
.www_zzjs_net {
 CLEAR: both; MARGIN-TOP: 5px
}
.www_zzjs_net_div {
 BORDER-RIGHT: #ebebeb 1px solid; BORDER-TOP: #ebebeb 1px; BORDER-LEFT: #ebebeb 1px solid; BORDER-BOTTOM: #ebebeb 1px solid
}
.www_zzjs_net_div A {
 COLOR: #0048ff
}
.www_zzjs_net {
 MARGIN-TOP: 15px
}
.www_zzjs_net_div {
 WIDTH: 228px
}
.www_zzjs_net .zzjs_net LI {
 BACKGROUND-POSITION: -81px -77px; MARGIN-TOP: 6px; FLOAT: left; LINE-HEIGHT: 23px; MARGIN-RIGHT: 4px
}
.www_zzjs_net .zzjs_net LI A {
 DISPLAY: block; FONT-WEIGHT: bolder; FONT-SIZE: 14px; WIDTH: 68px; COLOR: #640000; HEIGHT: 23px; TEXT-ALIGN: center; TEXT-DECORATION: none
}
.www_zzjs_net .zzjs_net LI.cur {
 BACKGROUND-POSITION: 0px -77px; HEIGHT: 24px
}
.tabcontent {
 DISPLAY: none; PADDING-TOP: 5px
}
.cur_tabcontent {
 DISPLAY: block
}
.tabcontent LI {
 CLEAR: both; LINE-HEIGHT: 33px
}
.tabcontent LI.even {
 BORDER-TOP: #e9e9e9 1px solid; BORDER-BOTTOM: #e9e9e9 1px solid; BACKGROUND-COLOR: #f0f0f0
}
.tabcontent LI.odd {
}
.tabcontent LI I {
 MARGIN-TOP: 8px; FLOAT: left; MARGIN-LEFT: 7px; WIDTH: 19px; LINE-HEIGHT: 19px; MARGIN-RIGHT: 8px; FONT-STYLE: normal; HEIGHT: 19px; TEXT-ALIGN: center
}
.tabcontent LI I.i_yeicon {
 BACKGROUND-POSITION: 0px 0px
}
.tabcontent LI I.i_graycon {
 BACKGROUND-POSITION: -24px 0px
}
.tabcontent LI A {
 FONT-SIZE: 14px; TEXT-DECORATION: none
}
.tabcontent LI A:hover {
 TEXT-DECORATION: underline
}
.tabcontent LI.cur {
 BORDER-TOP-WIDTH: 0px; BACKGROUND-POSITION: 0px -112px; BORDER-LEFT-WIDTH: 0px; LEFT: -1px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 230px; LINE-HEIGHT: 15px; PADDING-TOP: 6px; POSITION: relative; HEIGHT: 64px; BORDER-RIGHT-WIDTH: 0px
}
.tabcontent LI.cur IMG {
 FLOAT: left
}
.tabcontent LI.cur I {
 MARGIN-TOP: 20px; MARGIN-RIGHT: 0px
}
.tabcontent LI.cur A {
 FONT-WEIGHT: bolder; FONT-SIZE: 12px
}
.tabcontent LI.cur SPAN {
 FONT-WEIGHT: bolder; COLOR: #c70202
}
</style>
<script type="text/javascript">
(function(){
  var str=window.location.href;
    var pid= str.match(/pid=mm_d{0,10}_d{0,10}_d{0,10}/i);
    //alert(pid);
    if(pid){
      pid = pid[0].split("=")[1]
      var reg=new RegExp("pid=mm_0_0_0","gmi");
      var as   =   document.getElementsByTagName("A");
      for(var   i   =   0;   i <   as.length;   i   ++){
        as[i].href=as[i].href.replace(reg,"pid="+pid);
      }
      document.body.innerHTML =document.body.innerHTML.replace(reg,"pid="+pid)
  }//欢迎来到站长 特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
})();
</script>
<script type="text/javascript" src="/img/jquery_zzjs.js"></script>
<script type="text/javascript">
$(function(){
    $(".tabcontent li:odd").addClass("even");
    $(".tabcontent li").each(function(){
        $this = $(this);
        $this.mouseover(function(){
          if($(this).hasClass("cur")){return true;}
         $(this).siblings("li").removeClass("cur");
         $(this).siblings("li").find("img").css("display", "none");
         $(this).siblings("li").find("span").css("display", "none");
         $(this).addClass("cur");
         $(this).find("img").css("display", "block");
         $(this).find("span").css("display", "block");
          return false;
        });
    });
    $(".tabcontent li img,.tabcontent li span").css("display", "none");
    $(".tabcontent li.cur img,.tabcontent li.cur span").css("display", "block");
    $(".zzjs_net li").each(function(){
        $this = $(this);
        $this.mouseover(function(){
            $(this).siblings("li").removeClass("cur");
            $(this).addClass("cur");
            var $cur_id_num = $(this).attr("id").slice(-1);
            $(".tabcontent").removeClass("cur_tabcontent");
            $("#tabcontent" + $cur_id_num).addClass("cur_tabcontent");
        });
    });
});//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

需要加载js文件，请刷新后看效果。
<DIV class="www_zzjs_net" style="MARGIN-TOP: 0px; WIDTH: 230px; HEIGHT: 420px">
 <UL class="zzjs_net">
  <LI class="cur" id="zzjs_net1"><A href="http://search8.taobao.com/browse/search_easy.htm?keyword=凉鞋&catid=50006843&refpid=mm_0_0_0&isinner=0&t=0e9b9a8d1" target="_blank">淘气榜</A></LI>
 </UL>
 <DIV class="www_zzjs_net_div">
  <UL class="tabcontent cur_tabcontent" id="tabcontent1">
   <LI><I class="i_yeicon">1</I> <A href="http://zzjs.net" target="_blank"><IMG height="62" alt="" src="/img/product.jpg" width="72"><A href="http://zzjs.net" target="_blank">知性OL－简约大方通勤必备</A> <SPAN>淘宝价：46元</SPAN>
   <LI><I class="i_yeicon">2</I> <A href="http://zzjs.net" target="_blank"><IMG height="62" alt="" src="/img/product.jpg" width="72"><A href="http://zzjs.net" target="_blank">英伦风－百搭帆布帅气单肩包</A> <SPAN>淘宝价：88元</SPAN>
   <LI><I class="i_yeicon">3</I> <A href="http://zzjs.net" target="_blank"><IMG height="62" alt="" src="/img/product.jpg" width="72"><A href="http://zzjs.net" target="_blank">淑女系－可爱小女生最爱</A> <SPAN>淘宝价：29元</SPAN> </LI>
   <LI class="cur"><I class="i_yeicon">4</I> <A href="http://zzjs.net" target="_blank"><IMG height="62" alt="" src="/img/product.jpg" width="72"><A href="http://zzjs.net" target="_blank">学院风－日系流行时尚双肩包</A> <SPAN>淘宝价：55元</SPAN>
   <LI><I class="i_graycon">5</I><A href="http://zzjs.net" target="_blank"><IMG height="62" alt="" src="/img/product.jpg" width="72"><A href="http://zzjs.net" target="_blank">时尚派－柱形手提斜挎女包</A> <SPAN>淘宝价：125元</SPAN>
   <LI><I class="i_graycon">6</I> <A href="http://zzjs.net" target="_blank"><IMG height="62" alt="" src="/img/product.jpg" width="72"><A href="http://zzjs.net" target="_blank">鱼嘴鞋－迪斯尼的童话公主</A> <SPAN>淘宝价：49元</SPAN>
   <LI><I class="i_graycon">7</I> <A href="http://zzjs.net" target="_blank"><IMG height="62" alt="" src="/img/product.jpg" width="72"><A href="http://zzjs.net" target="_blank">蝴蝶结－闪金淡蓝可爱单鞋</A> <SPAN>淘宝价：89元</SPAN>
   <LI><I class="i_graycon">8</I> <A href="http://zzjs.net" target="_blank"><IMG height="62" alt="" src="/img/product.jpg" width="72"><A href="http://zzjs.net" target="_blank">娃娃鞋－Honey甜心蝴蝶结</A> <SPAN>淘宝价：56元</SPAN>
   <LI><I class="i_graycon">9</I> <A href="http://zzjs.net" target="_blank"><IMG height="62" alt="" src="/img/product.jpg" width="72"><A href="http://zzjs.net" target="_blank">坡跟鞋－韩版甜美坡跟凉鞋</A> <SPAN>淘宝价：38元</SPAN>
   <LI><I class="i_graycon">10</I> <A href="http://zzjs.net" target="_blank"><IMG height="62" alt="" src="/img/product.jpg" width="72"><A href="http://zzjs.net" target="_blank">高跟鞋－复古小名媛圆头鞋</A> <SPAN>淘宝价：53元</SPAN></LI>
  </UL>
 </DIV>
</DIV>
</body>
</html>

关于淘宝网商品展示效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010091564735.shtml方便下次再访问哦。

·上一篇： 按钮控制图层旋转特效
·下一篇： 非常酷的点亮星星进行投票效果

淘宝网商品展示效果

文章分类LIST >>返回首页

最新游戏

最新新闻