仿淘宝网商品人气排行榜特效

8个月前 (03-18 19:33)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

淘宝商品人气排行榜展示效果，默认放大显示排行第一的商品，当用户的鼠标经过商品时显示详细信息。

<!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特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种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_wuming_ren .wuming_ren {
BACKGROUND-IMAGE: url(/img/20240318_www_wuming_ren_31.png); BACKGROUND-REPEAT: no-repeat
}
.www_wuming_ren .wuming_ren LI {
BACKGROUND-IMAGE: url(/img/20240318_www_wuming_ren_31.png); BACKGROUND-REPEAT: no-repeat
}
.tabcontent LI.cur {
BACKGROUND-IMAGE: url(/img/20240318_www_wuming_ren_31.png); BACKGROUND-REPEAT: no-repeat
}
.tabcontent LI I {
BACKGROUND-IMAGE: url(/img/20240318_www_wuming_ren_32.gif); BACKGROUND-REPEAT: no-repeat
}
.www_wuming_ren .wuming_ren {
BACKGROUND-POSITION: 0px -37px; PADDING-LEFT: 10px; WIDTH: 220px; COLOR: #640000; LINE-HEIGHT: 30px; HEIGHT: 30px
}
.www_wuming_ren {
CLEAR: both; MARGIN-TOP: 5px
}
.www_wuming_ren_div {
BORDER-RIGHT: #ebebeb 1px solid; BORDER-TOP: #ebebeb 1px; BORDER-LEFT: #ebebeb 1px solid; BORDER-BOTTOM: #ebebeb 1px solid
}
.www_wuming_ren_div A {
COLOR: #0048ff
}
.www_wuming_ren {
MARGIN-TOP: 15px
}
.www_wuming_ren_div {
WIDTH: 228px
}
.www_wuming_ren .wuming_ren LI {
BACKGROUND-POSITION: -81px -77px; MARGIN-TOP: 6px; FLOAT: left; LINE-HEIGHT: 23px; MARGIN-RIGHT: 4px
}
.www_wuming_ren .wuming_ren LI A {
DISPLAY: block; FONT-WEIGHT: bolder; FONT-SIZE: 14px; WIDTH: 68px; COLOR: #640000; HEIGHT: 23px; TEXT-ALIGN: center; TEXT-DECORATION: none
}
.www_wuming_ren .wuming_ren 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)
  }//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
})();
</script>
<script type="text/javascript" src="/img/jquery_wuming_ren.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");
    $(".wuming_ren 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");
        });
    });
});//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件，请刷新后看效果。
<DIV class="www_wuming_ren" style="MARGIN-TOP: 0px; WIDTH: 230px; HEIGHT: 420px">
<UL class="wuming_ren">
<LI class="cur" id="wuming_ren1"><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_wuming_ren_div">
<UL class="tabcontent cur_tabcontent" id="tabcontent1">
<LI><I class="i_yeicon">1</I> <A href="https://www.wuming.ren" target="_blank"><IMG height="62" alt="" src="/img/20240318_www_wuming_ren_33.jpg" width="72"><A href="https://www.wuming.ren" target="_blank">知性OL－简约大方通勤必备</A> <SPAN>淘宝价：46元</SPAN>
<LI><I class="i_yeicon">2</I> <A href="https://www.wuming.ren" target="_blank"><IMG height="62" alt="" src="/img/20240318_www_wuming_ren_33.jpg" width="72"><A href="https://www.wuming.ren" target="_blank">英伦风－百搭帆布帅气单肩包</A> <SPAN>淘宝价：88元</SPAN>
<LI><I class="i_yeicon">3</I> <A href="https://www.wuming.ren" target="_blank"><IMG height="62" alt="" src="/img/20240318_www_wuming_ren_33.jpg" width="72"><A href="https://www.wuming.ren" target="_blank">淑女系－可爱小女生最爱</A> <SPAN>淘宝价：29元</SPAN> </LI>
<LI class="cur"><I class="i_yeicon">4</I> <A href="https://www.wuming.ren" target="_blank"><IMG height="62" alt="" src="/img/20240318_www_wuming_ren_33.jpg" width="72"><A href="https://www.wuming.ren" target="_blank">学院风－日系流行时尚双肩包</A> <SPAN>淘宝价：55元</SPAN>
<LI><I class="i_graycon">5</I><A href="https://www.wuming.ren" target="_blank"><IMG height="62" alt="" src="/img/20240318_www_wuming_ren_33.jpg" width="72"><A href="https://www.wuming.ren" target="_blank">时尚派－柱形手提斜挎女包</A> <SPAN>淘宝价：125元</SPAN>
<LI><I class="i_graycon">6</I> <A href="https://www.wuming.ren" target="_blank"><IMG height="62" alt="" src="/img/20240318_www_wuming_ren_33.jpg" width="72"><A href="https://www.wuming.ren" target="_blank">鱼嘴鞋－迪斯尼的童话公主</A> <SPAN>淘宝价：49元</SPAN>
<LI><I class="i_graycon">7</I> <A href="https://www.wuming.ren" target="_blank"><IMG height="62" alt="" src="/img/20240318_www_wuming_ren_33.jpg" width="72"><A href="https://www.wuming.ren" target="_blank">蝴蝶结－闪金淡蓝可爱单鞋</A> <SPAN>淘宝价：89元</SPAN>
<LI><I class="i_graycon">8</I> <A href="https://www.wuming.ren" target="_blank"><IMG height="62" alt="" src="/img/20240318_www_wuming_ren_33.jpg" width="72"><A href="https://www.wuming.ren" target="_blank">娃娃鞋－Honey甜心蝴蝶结</A> <SPAN>淘宝价：56元</SPAN>
<LI><I class="i_graycon">9</I> <A href="https://www.wuming.ren" target="_blank"><IMG height="62" alt="" src="/img/20240318_www_wuming_ren_33.jpg" width="72"><A href="https://www.wuming.ren" target="_blank">坡跟鞋－韩版甜美坡跟凉鞋</A> <SPAN>淘宝价：38元</SPAN>
<LI><I class="i_graycon">10</I> <A href="https://www.wuming.ren" target="_blank"><IMG height="62" alt="" src="/img/20240318_www_wuming_ren_33.jpg" width="72"><A href="https://www.wuming.ren" target="_blank">高跟鞋－复古小名媛圆头鞋</A> <SPAN>淘宝价：53元</SPAN></LI>
</UL>
</DIV>
</DIV>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/335.html

排行榜鼠标感应放大
回帖

仿淘宝网商品人气排行榜特效 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息