仿淘宝商城首页，自动切换展示banner，及楼层滤镜效果

最新推荐文章于 2022-10-01 13:07:43 发布
最新推荐文章于 2022-10-01 13:07:43 发布
阅读量138 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/osmond/archive/2011/12/16/2290273.html
版权

<!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=utf-8" />
<title>测试</title>
<style type="text/css">
* {
 margin:0;
 padding:0;
}
body {
 font-size:12px;
 color:#222;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 background:#f0f0f0;
}
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
.clearfix {
 zoom:1;
}
ul,
li {
 list-style:none;
}
img {
 border:0;
}
.wrapper {
 width:600px;
 margin:0 auto;
 padding-bottom:50px;
}
.wrapper {
 width:780px;
}
/* tmall focus */
#focus {
 width:780px;
 height:420px;
 overflow:hidden;
 position:relative;
}
#focus ul {
 height:420px;
 position:absolute;
}
#focus ul li {
 float:left;
 width:780px;
 height:420px;
 overflow:hidden;
 position:relative;
 background:#000;
}
#focus ul li div {
 position:absolute;
 overflow:hidden;
}
#focus .btnBg {
 position:absolute;
 width:780px;
 height:40px;
 left:0;
 bottom:0;
 background:#000;
}
#focus .btn {
 position:absolute;
 width:770px;
 height:24px;
 left:0;
 bottom:8px;
 padding-left:10px;
}
#focus .btn span {
 display:inline-block;
 _display:inline;
 _zoom:1;
 width:24px;
 height:24px;
 line-height:24px;
 text-align:center;
 font-size:20px;
 font-family:"Microsoft YaHei", SimHei;
 margin-right:10px;
 cursor:pointer;
 color:#fff;
}
#focus .btn span.on {
 background:#000;
 color:#fcc;
}
#floors .floorMain {
 height:300px;
 position:absolute;
}
#floors .floorMain li {
 float:left;
 width:780px;
 height:420px;
 overflow:hidden;
 
 position:relative;
 
}
#floors .floorMain li div {
 position:absolute;
 overflow:hidden;
}
.floor-area {
 MARGIN-BOTTOM: 30px;
 HEIGHT: 300px;
 VISIBILITY: hidden
}
.floor-loading {
 BACKGROUND: url(http://img02.taobaocdn.com/tps/i2/T16WJqXaXeXXXXXXXX-32-32.gif) no-repeat 47% 50%
}
.floor IMG {
 VERTICAL-ALIGN: top
}
.floor {
 POSITION: relative;
 PADDING-BOTTOM: 10px;
 WIDTH: 970px;
 BACKGROUND: #fff;
 HEIGHT: 340px;
 OVERFLOW: hidden
}
.floorLeft {
 HEIGHT: 300px;
 OVERFLOW: hidden
}
.floorMain {
 HEIGHT: 300px;
 OVERFLOW: hidden
}
.floorLeft {
 WIDTH: 190px;
 FLOAT: left
}
.floorMain {
 POSITION: relative;
 WIDTH: 780px;
 DISPLAY: inline;
 FLOAT: left
}
.floorHd {
 BORDER-BOTTOM: #000 2px solid;
 LINE-HEIGHT: 99em;
 HEIGHT: 34px;
 OVERFLOW: hidden
}
.floorHd {
 BACKGROUND: url(http://img03.taobaocdn.com/tps/i3/T1PsqlXhldXXXXXXXX-158-149.png) no-repeat
}
.f1 .floorHd {
 BACKGROUND-POSITION: 0px 9px
}
.f2 .floorHd {
 BACKGROUND-POSITION: 0px -17px
}
.f3 .floorHd {
 BACKGROUND-POSITION: 0px -43px
}
.f4 .floorHd {
 BACKGROUND-POSITION: 0px -69px
}
.f5 .floorHd {
 BACKGROUND-POSITION: 0px -95px
}
.f6 .floorHd {
 BACKGROUND-POSITION: 0px -121px
}
.floorTop {
 TEXT-ALIGN: right;
 LINE-HEIGHT: 33px;
 MARGIN-TOP: -34px;
 WIDTH: 780px;
 HEIGHT: 34px;
 MARGIN-LEFT: 190px;
 OVERFLOW: hidden
}
.floorTop .pr {
 POSITION: relative;
 TEXT-ALIGN: center;
 PADDING-BOTTOM: 0px;
 LINE-HEIGHT: 20px;
 MARGIN: 7px 0px 0px 9px;
 PADDING-LEFT: 28px;
 PADDING-RIGHT: 28px;
 DISPLAY: inline-block;
 BACKGROUND: #e6e6e6;
 FLOAT: right;
 HEIGHT: 20px;
 OVERFLOW: hidden;
 PADDING-TOP: 0px;
 border-radius: 2px;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 -khtml-border-radius: 2px
}
.floorTop .pr:hover {
 BACKGROUND: #cd0000;
 COLOR: #fff;
 TEXT-DECORATION: none
}
.floorTop .pr .cArror {
 POSITION: absolute;
 WIDTH: 13px;
 BACKGROUND-POSITION: -26px 0px;
 HEIGHT: 13px;
 TOP: 3px;
 RIGHT: 10px
}
.floorTop .pr:hover .cArror {
 BACKGROUND-POSITION: 0px 0px
}
.floor-catNav {
 HEIGHT: 30px;
 OVERFLOW: hidden
}
.floor-catNav LI {
 DISPLAY: inline
}
.floor-catNav A {
 PADDING-BOTTOM: 0px;
 PADDING-LEFT: 10px;
 PADDING-RIGHT: 10px;
 COLOR: #666;
 MARGIN-RIGHT: -1px;
 BORDER-RIGHT: #ccc 1px solid;
 PADDING-TOP: 0px
}
#floors .text-div{font-size:12px;background:#f0f0f0;}
#floors .text-div a{color:#000;text-decoration:none;}
#floors .text-div a:hover{color:red;}
#floors .text-div .left{width:585px;height:300px;background:#red;}
#floors .text-div .left ul{width:585px;height:300px;display:block;background:#f0f0f0;}
#floors .text-div .left ul li{float:left;display:block;width:195px;height:300px;background:#f0f0f0;
}
.text-div .left .p_item{
    width:191px;
 height:296px;
 border:2px solid #f0f0f0;
}
.text-div .left .p_item .pic{
    width:160px;
 height:160px;
 border:1px solid red;
 margin-top:15px;
 margin-left:15px;
}
.text-div .left .p_item .desc{
    width:160px;
 height:30px;
 overflow:hidden;
 text-align:center;
 font-size:12px;
 margin-top:200px;
 margin-left:15px;
}
.text-div .left .p_item .price{
    width:100px;
 background:url(images/T2XdNBXaJbXXXXXXXX-50560029.gif) center left no-repeat;
 margin-top:250px;
 margin-left:35px;
}
.text-div .left .p_item .price span{
    color:red;
 font-size:12px;
 font-weight:bold;
}
#floors .show{
    width:195px;
 height:300px;
 position:absolute;
 margin-left:580px;

}
#floors .show li{background:url(images/ol.gif) no-repeat center left; width:195px;height:16px;white-space:nowrap;
    padding-left:20px;
 padding-right:5px;
 margin-bottom:10px;
 display:block;
}
#floors .show li.l1{background-position:0 0;}
#floors .show li.l2{background-position:0px -26px;}
#floors .show li.l3{background-position:0 -52px}
#floors .show li.l4{background-position:0 -78px}
#floors .show li.l5{background-position:0 -104px}
#floors .show li.l6{background-position:0 -130px;}
#floors .show li.l7{background-position:0 -156px}
#floors .show li.l8{background-position:0 -182px}
#floors .show li.l9{background-position:0 -208px}
#floors .show li.l10{background-position:0 -234px}

 

#floors .show ul{
 width:195px;
 height:300px;
 float:left; 
 margin-left:0;
 padding-right:5px;
 padding-top:5px;
}

.p_item_selected{
}
.logoList {
 HEIGHT: 100%
}
.logoList LI {
 POSITION: relative;
 WIDTH: 95px;
 FLOAT: left;
 HEIGHT: 30px
}
.logoList A {
 POSITION: absolute;
 TEXT-INDENT: -9999px;
 WIDTH: 100%;
 DISPLAY: inline-block;
 HEIGHT: 30px;
 OVERFLOW: hidden;
 TOP: 0px;
 LEFT: 0px
}
.logoList A:hover {
 FILTER: alpha(opacity=10);
 BACKGROUND: #000;
 HEIGHT: 31px;
 TOP: -1px;
 opacity: .1
}
LI.logoList-more {
 TEXT-ALIGN: right;
 LINE-HEIGHT: 30px;
 WIDTH: 175px;
 CLEAR: both
}
LI.logoList-more A {
 POSITION: static;
 WIDTH: 65px;
 ZOOM: 1;
 DISPLAY: inline;
 HEIGHT: 30px;
 COLOR: #fff
}
LI.logoList-more A:hover {
 FILTER: alpha(opacity=100);
 BACKGROUND: none transparent scroll repeat 0% 0%;
 TEXT-DECORATION: none;
 opacity: 1
}
.logoList-more A S {
 PADDING-LEFT: 7px;
 FONT-FAMILY: 新宋体, 宋体;
 FONT-SIZE: 10px;
 TEXT-DECORATION: none
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
 var sWidth = $("#focus").width(); //获取焦点图的宽度
 var len = $("#focus ul li").length; //获取焦点图个数
 var index = 0;
 var picTimer;
 
 //以下代码添加数字按钮和按钮后的半透明长条
 var btn = "<div class='btnBg'></div><div class='btn'>";
 for(var i=0; i < len; i++) {
  btn += "<span>" + (i+1) + "</span>";
 }
 btn += "</div>"
 $("#focus").append(btn);
 $("#focus .btnBg").css("opacity",0.5);
 
 //为数字按钮添加鼠标滑入事件，以显示相应的内容
 $("#focus .btn span").mouseenter(function() {
  index = $("#focus .btn span").index(this);
  showPics(index);
 }).eq(0).trigger("mouseenter");
 
 //左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
 $("#focus ul").css("width",sWidth*len);
 
 //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
 $("#focus").hover(function() {
  clearInterval(picTimer);
 },function() {
  picTimer = setInterval(function() {
   showPics(index);
   index++;
   if(index == len) {index = 0;}
  },3000); //此3000代表自动播放的间隔，单位：毫秒
 }).trigger("mouseleave");
 
 //显示图片函数，根据接收的index值显示相应的内容
 function showPics(index) {
  var nowLeft = -index*sWidth; //根据index值计算ul元素的position
  $("#focus ul").stop(true,false).animate({"left":nowLeft},500); //通过animate()调整ul元素滚动到计算出的position
  $("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换显示效果
 }

 //鼠标滑入某li中的某div里，调整其同辈div元素的透明度，由于li的背景为黑色，使测试1有阴影效果
 $("#focus ul li div").hover(function() {
  $(this).siblings().css("opacity",0.7);
 },function() {
  $("#focus ul li div").css("opacity",1);
 });

 //鼠标滑入某li中的某div里，调整其同辈div元素的透明度，由于li的背景为黑色，使测试2有阴影效果
 $("#floors ul li div").hover(function() {
  $(this).siblings().css("opacity",0.7);
  $(".text-div").css("opacity",1);
 },function() {
  $("#floors ul li div").css("opacity",1);
 });
   
 //$(".text-div ul li").mouseover(function(){
//   var p_index = $(".text-div .left ul li").index(this);
//
//     $(".text-div ul li:eq(" + p_index + ") .p_item").css("border-color","red");
//  
// },function(){
//     $(".p_item").css("border-color","#f0f0f0");
// });

   //加红色边框  ：
    $(".text-div li").each(function(index){
  
  $(this).mouseover(function(){ 
   var liNode = $(this);
   timoutid = setTimeout(function(){
    
    $(".text-div .p_item").css("border-color","#f0f0f0");
    
    
    $(".text-div ul li:eq(" + index + ") .p_item").css("border-color","red")
    
   },100);   
  }).mouseout(function(){
   $(".text-div ul li .p_item").css("border-color","#f0f0f0");
   
   clearTimeout(timoutid); 
  });
 });
   $(".show ul li").each(function(index){
       $(this).mouseover(function(){
      var liNode = $(this);
      timoutid = setTimeout(function(){
      $(".show ul li").css("background-color","yellow").css("color","black");
   $(".show ul li:eq(" + index + ")").css("background-color","blue").css("color","white")
    },100)     
    }).mouseout(function(){
       $(".show ul li").css("background-color","yellow").css("color","black");
    clearTimeout(timoutid); 
    })
   })

});
</script>
</head>

<body>
<div class="wrapper">
  <h1>测试1</h1>
  <div id="focus">
    <ul>
      <li>
        <div style="left:0; top:0; width:780px; height:420px;"><a href="#"><img src="img/a01.jpg"/></a></div>
      </li>
      <li>
        <div style="left:0; top:0; width:560px; height:420px;"><a href="#"><img src="img/b01.jpg"/></a></div>
        <div style="right:0; top:0; width:220px; height:140px;"><a href="#"><img src="img/b02.jpg"/></a></div>
        <div style="right:0; top:140px; width:220px; height:140px;"><a href="#"><img src="img/b03.jpg"/></a></div>
        <div style="right:0; bottom:0; width:220px; height:140px;"><a href="#"><img src="img/b04.jpg"/></a></div>
      </li>
      <li>
        <div style="left:0; top:0; width:260px; height:210px;"><a href="#"><img src="img/c01.jpg"/></a></div>
        <div style="left:260px; top:0; width:260px; height:210px;"><a href="#"><img src="img/c02.jpg"/></a></div>
        <div style="left:0; top:210px; width:520px; height:210px;"><a href="#"><img src="img/c03.jpg"/></a></div>
        <div style="right:0; top:0; width:260px; height:420px;"><a href="#"><img src="img/c04.jpg"/></a></div>
      </li>
      <li>
        <div style="left:0; top:0; width:560px; height:420px;"><a href="#"><img src="img/d01.jpg"/></a></div>
        <div style="right:0; top:0; width:220px; height:140px;"><a href="#"><img src="img/d02.jpg"/></a></div>
        <div style="right:0; top:140px; width:220px; height:140px;"><a href="#"><img src="img/d03.jpg"/></a></div>
        <div style="right:0; bottom:0; width:220px; height:140px;"><a href="#"><img src="img/d04.jpg"/></a></div>
      </li>
      <li>
        <div style="left:0; top:0; width:780px; height:420px;"><a href="#"><img src="img/e01.jpg"/></a></div>
      </li>
    </ul>
  </div>
  <div class="floor-loading" id="floors">
    <div class="layout floor f1" id="floor-1">
      <h2 class="floorHd">美容珠宝</h2>
      <div class="floorTop"> <a target="_blank" href="#" class="pr" >美容馆<i class="cArror"></i></a>
        <ul class="floor-catNav">
          <li><a target="_blank" href="#">初冬滋润</a></li>
          <li><a target="_blank" href="#">面霜</a></li>
          <li><a target="_blank" href="#">面膜</a></li>
          <li><a target="_blank" href="#">套装</a></li>
          <li><a target="_blank" href="#">BB霜</a></li>
          <li><a target="_blank" href="#">睫毛膏</a></li>
          <li><a target="_blank" href="#">手表</a></li>
          <li><a target="_blank" href="#">毛衣链</a></li>
          <li><a target="_blank" href="#">耳环</a></li>
          <li><a target="_blank" href="#">水晶</a></li>
          <li><a target="_blank" href="#">黄金</a></li>
          <li><a target="_blank" href="#">结婚钻戒</a></li>
        </ul>
      </div>
      <div class="floorLeft">
        <ul class="logoList clearfix" style="background:#d78494 url(http://img01.taobaocdn.com/tps/i1/T1T09vXkV3XXXXXXXX-190-300.png) no-repeat">
          <li><a target="_blank" href="#">Benefit</a></li>
          <li><a target="_blank" href="#">Clarins/娇韵诗</a></li>
          <li><a target="_blank" href="#">Anna sui/安娜苏</a></li>
          <li><a target="_blank" href="#">Nuxe</a></li>
          <li><a target="_blank" href="#">Fancl/无添加</a></li>
          <li><a target="_blank" href="#">SANA</a></li>
          <li><a target="_blank" href="#">婵真</a></li>
          <li><a target="_blank" href="#">Marubi/丸美</a></li>
          <li><a target="_blank" href="#">珀莱雅</a></li>
          <li><a target="_blank" href="#">昭贵</a></li>
          <li><a target="_blank" href="#">周生生</a></li>
          <li><a target="_blank" href="#">亚一</a></li>
          <li><a target="_blank" href="#">佐卡伊</a></li>
          <li><a target="_blank" href="#">雷朋</a></li>
          <li><a target="_blank" href="#">伊泰莲娜</a></li>
          <li><a target="_blank" href="#">shes</a></li>
          <li><a target="_blank" href="#">飞亚达</a></li>
          <li><a target="_blank" href="#">新光</a></li>
          <li class="logoList-more"><a target="_blank" href="#">更多品牌<s>>></s></a></li>
        </ul>
      </div>
      <div class="floorMain">
        <ul>
          <li>
            <div style="top:0px;left:390px; width:390px; height:150px;"> <a target="_blank" href="#"> <img src="http://img03.taobaocdn.com/tps/i3/T1.OeGXjxpXXXXXXXX-390-150.jpg" alt="巧克力" /> </a> </div>
            <div style="top:150px;left:0px; width:195px; height:150px;"> <a target="_blank" href="#"> <img src="http://img04.taobaocdn.com/tps/i4/T1gP1GXd4eXXXXXXXX-195-150.jpg" alt="维生素" /> </a> </div>
            <div style="top:150px;left:195px; width:390px; height:150px;"> <a target="_blank" href="#"> <img src="http://img01.taobaocdn.com/tps/i1/T1YXeEXjtfXXXXXXXX-390-150.jpg" alt="杯酒人生" /> </a> </div>
            <div style="top:150px;left:585px; width:195px; height:150px;"> <a target="_blank" href="#"> <img src="http://img04.taobaocdn.com/tps/i4/T1PFGEXoxcXXXXXXXX-195-150.png" alt="月月鲜" /> </a> </div>
            <div style="top:0px;left:0px; width:195px; height:150px;"> <a target="_blank" href="#"> <img src="http://img03.taobaocdn.com/tps/i3/T1UL5GXh4kXXXXXXXX-195-150.jpg" alt="潮妈购物大PK" /> </a> </div>
            <div style="top:0px;left:195px; width:195px; height:150px;"> <a target="_blank" href="#" > <img src="http://img03.taobaocdn.com/tps/i3/T1MWmFXbhdXXXXXXXX-195-150.jpg" alt="孕妈冬装" /> </a> </div>
          </li>
        </ul>
      </div>
      <div> </div>
    </div>
    <div class="layout floor f2" id="floor-2" style="height:640px;">
      <h2 class="floorHd">服饰箱包</h2>
      <div class="floorTop"> <a target="_blank" href="#" class="pr" >原创服饰馆<i class="cArror"></i></a>
        <ul class="floor-catNav">
          <li><a target="_blank" href="#">针织衫</a></li>
          <li><a target="_blank" href="#">皮衣</a></li>
          <li><a target="_blank" href="#">毛衣</a></li>
          <li><a target="_blank" href="#">呢大衣</a></li>
          <li><a target="_blank" href="#">皮草</a></li>
          <li><a target="_blank" href="#">保暖衣</a></li>
          <li><a target="_blank" href="#">家居服</a></li>
          <li><a target="_blank" href="#">卫衣</a></li>
          <li><a target="_blank" href="#">夹克</a></li>
          <li><a target="_blank" href="#">羽绒服</a></li>
          <li><a target="_blank" href="#">棉衣</a></li>
          <li><a target="_blank" href="#">牛仔裤</a></li>
        </ul>
      </div>
      <!--<div class="floorLeft">
   
   <ul class="logoList clearfix" style="background:#9f88ad url(images/T1guSCXiRjXXXXXXXX-190-300.png) no-repeat">
   
   
        <li><a target="_blank" href="#">UNIQLO优衣库</a></li>
        <li><a target="_blank" href="#">美邦</a></li>
        <li><a target="_blank" href="#">JACKJONES</a></li>
        <li><a target="_blank" href="#">ochirly</a></li>
        <li><a target="_blank" href="#">GXG</a></li>
        <li><a target="_blank" href="#">七匹狼</a></li>
        <li><a target="_blank" href="#">ONLY</a></li>
        <li><a target="_blank" href="#">TONLION</a></li>
        <li><a target="_blank" href="#">Aimer爱慕</a></li>
        <li><a target="_blank" href="#">COCOOM</a></li>
        <li><a target="_blank" href="#">歌莉娅</a></li>
        <li><a target="_blank" href="#">真维斯</a></li>
        <li><a target="_blank" href="#">歌瑞尔</a></li>
        <li><a target="_blank" href="#">纳纹</a></li>
        <li><a target="_blank" href="#">JOENOE九牧王</a></li>
        <li><a target="_blank" href="#">安莉芳</a></li>
        <li><a target="_blank" href="#">马克华菲</a></li>
        <li><a target="_blank" href="#">rip裂帛</a></li>
       
   
    <li class="logoList-more"><a target="_blank" href="#">更多品牌<s>>></s></a></li>
   
   </ul>
   
  </div>
-->
      <div class="floorMain" style="height:600px;width:975px;">
        <ul>
          <li style="height:600px;width:975px">
            <div style="top:0px;left:0px; width:195px; height:600px;"> <a target="_blank" href="#"> <img src="images/T1L4uGXgxlXXXXXXXX-195-300.jpg" style="width:195px; height:600px;" alt="巧克力" /> </a> </div>
            <div style="top:0px;left:195px; width:195px; height:150px;"> <a target="_blank" href="#"> <img src="images/T1NxqGXj8lXXXXXXXX-195-150.jpg" alt="维生素" /> </a> </div>
            <div style="top:150px;left:195px; width:195px; height:150px;"> <a target="_blank" href="#"> <img src="images/T1tDSEXlJpXXXXXXXX-195-150.jpg" alt="杯酒人生" /> </a> </div>
            <div style="top:0px;left:390px; width:195px; height:300px;"> <a target="_blank" href="#"> <img src="images/T1_maGXf8eXXXXXXXX-195-300.jpg" alt="月月鲜" /> </a> </div>
            <div style="top:0px;left:585px; width:195px; height:300px;"> <a target="_blank" href="#"> <img src="images/T1P5OGXe8oXXXXXXXX-195-300.jpg" alt="潮妈购物大PK" /> </a> </div>
            <div style="top:0px;left:780px; width:195px; height:300px;"> <a target="_blank" href="#"> <img src="images/T1P5OGXe8oXXXXXXXX-195-300.jpg" alt="潮妈购物大PK" /> </a> </div>
            <div class="text-div" style="background:yellow;top:300px;left:195px;height:300px;width:780px">
              <div class="left">
                <ul>
                  <li>
                    <div class="p_item">
                      <div class="pic"><a href="#"><img src="images/T1VkGxXgtLXXXw0rEY_025530_jpg_160x160.jpg" /></a></div>
                      <div class="desc"><a href="#" target="_blank">美的电暖器NS8-09C 远红外 900W/450W 两档可调 </a></div>
                      <div class="price">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>89.00元</span></div>
                    </div>
                  </li>
                  <li>
                    <div class="p_item">
                      <div class="pic"><a href="#"><img src="images/T1VkGxXgtLXXXw0rEY_025530_jpg_160x160.jpg" /></a></div>
                      <div class="desc"><a href="#" target="_blank">美的电暖器NS8-09C 远红外 900W/450W 两档可调 </a></div>
                      <div class="price">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>89.00元</span></div>
                    </div>
                  </li>
                  <li>
                    <div class="p_item">
                      <div class="pic"><a href="#"><img src="images/T1VkGxXgtLXXXw0rEY_025530_jpg_160x160.jpg" /></a></div>
                      <div class="desc"><a href="#" target="_blank">美的电暖器NS8-09C 远红外 900W/450W 两档可调 </a></div>
                      <div class="price">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>89.00元</span></div>
                    </div>
                  </li>
                </ul>
              </div>
             
            <!--<div style="top:0px;left:195px; width:195px; height:150px;">
       <a target="_blank" href="#" >
       <img src="http://img03.taobaocdn.com/tps/i3/T1MWmFXbhdXXXXXXXX-195-150.jpg" alt="孕妈冬装" />
       </a>
      </div>-->
           
              <div class="show">
                <ul class="show">
                  <li class="l1"><a href="#">阳朔，就住十里画廊里的3690休闲客栈</a></li>
                  <li class="l2"><a href="#">阳朔，就住十里画廊里的3690休闲客栈</a></li>
                  <li class="l3"><a href="#">阳朔，就住十里画廊里的3690休闲客栈</a></li>
                  <li class="l4"><a href="#">阳朔，就住十里画廊里的3690休闲客栈</a></li>
                  <li class="l5"><a href="#">阳朔，就住十里画廊里的3690休闲客栈</a></li>
                  <li class="l6"><a href="#">阳朔，就住十里画廊里的3690休闲客栈</a></li>
                  <li class="l7"><a href="#">阳朔，就住十里画廊里的3690休闲客栈</a></li>
                  <li class="l8"><a href="#">阳朔，就住十里画廊里的3690休闲客栈</a></li>
                  <li class="l9"><a href="#">阳朔，就住十里画廊里的3690休闲客栈</a></li>
                  <li class="l10"><a href="#">阳朔，就住十里画廊里的3690休闲客栈</a></li>
                </ul>
              </div>
            </div>
           
          </li>
        </ul>
      </div>
     
     

           
    </div>
  </div>
</div>
<!-- wrapper end -->
</body>
</html>

 

效果：

  材料：

转载于:https://www.cnblogs.com/osmond/archive/2011/12/16/2290273.html

weixin_33863087
关注
仿淘宝、网易等广告条banner效果
09-15
这个Demo的效果是作者根据自身的项目经验，从实际项目中抽取出来的单独小功能模块，觉得这个广告条在商业开发中用的比较广告，故提供之，有关技术博客，请参考： http://blog.csdn.net/allen315410/article/details/39294343
仿淘宝商品详情页顶部banner和沉浸式效果
时光小偷
01-03 1417
这边使用第三方沉浸式库https://github.com/gyf-dev/ImmersionBar使用自己去研究 一、沉浸式效果 主要是看滑动过程中toolBar的透明度变化 布局如下： <android.support.design.widget.CoordinatorLayout android:id="@+id/coordinator" andr...
仿淘宝首页轮播
专注的小眼神的博客
01-12 1407
仿淘宝首页轮播 大一学了HTML和js，由于老师讲的比较慢，所以就自学，看着看着感觉，这个轮播挺有意思的，就去问老师，老实说网上有这样的插件，所有我就回去网上所了一下，果然有，给大家推荐一个网站：http://www.jq22.com/。这个网站有很多的特效插件，不过好多都是用到了jquary，但是对于刚刚接触web前端的同学来说，可能看代码的话，比较困难，所以，出于这样的目的，我就写了一个没有
【小程序项目开发-- 京东商城】uni-app之首页商品楼层
计算机魔术师的blog
06-25 2327
效果图： 一、效果图： 二、数据获取: 三、UI 界面渲染 四、跳转到商品页 4.1、处理接口URL地址 五、配置页面组件navigator跳转页面 六、分支合并与提 处理URl链接则使用循环他与for区别在于 （for&forEach文章讲解 & 箭头函数）两者最大的区别 成功修改 接受页面参数，并渲染为窗口标题 在goods_list.vue文件中 六、分支合并与提交（选读*） 将本地home分支合并到master分支 代码推送到远程仓库 删除分支 git bran
小程序商城项目首页导航栏与楼层栏搭建
weixin_46351593的博客
03-01 873
文章目录一、分析效果以及传递来的数据二、请求数据三、分类导航构建四、楼层构建 一、分析效果以及传递来的数据 现在，我们需要完成图示的导航和楼层的构建 根据请求来的数据，导航栏就是四张图片，而且文字都包含进去了 楼层也大致可以分为标题和内容：标题包含一张图片，内容包含5张图片共3组 二、请求数据 暂时利用封装的promise请求分类导航与楼层数据 在AppData中检查是否获取数据 三、分类导航构建 简单的用循环将四张图片在一行内显示，并调整一下样式即可 index.wxml:
淘宝网改版前首页banner幻灯片切换效果
06-09
在改版前，淘宝网首页的Banner区域采用了一种引人注目的幻灯片切换效果，为用户提供了一个动态、吸引人的展示空间，以吸引用户的注意力并引导他们浏览更多的商品。这种幻灯片切换效果是网页设计中的一个重要组成部分...
基于java开发的单页显示3个Item的ViewPager炫酷切换效果，适用于Banner等+源码+项目文档+效果展示
最新发布
08-19
基于java开发的单页显示3个Item的ViewPager炫酷切换效果，适用于Banner等+源码+项目文档+效果展示，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档~ ...
JS图片banner自动切换效果代码
01-23
JS（JavaScript）图片Banner自动切换效果代码则是实现这一功能的核心技术。本文将深入探讨如何利用JavaScript来创建一个动态、吸引人的图片轮播效果。 首先，我们需要理解JavaScript的基本概念。JavaScript是一种轻...
仿天猫分类导航banner切换代码.zip
07-11
仿天猫分类导航banner切换代码是电商网站中常见的一种设计元素，用于吸引用户的注意力并方便他们快速浏览和选择商品类别。这种切换效果不仅提升了用户体验，也增加了网站的视觉吸引力。在这个项目中，我们将深入探讨...
Android 仿快手视频列表，RecyclerView与Banner联动效果
01-15
反之，当`Banner`自动切换时，也可以更新`RecyclerView`中对应位置的数据项，使得两者保持一致。 实现这一效果的具体步骤如下： 1. 创建`RecyclerView`：设置布局管理器，创建适配器，填充数据。每个列表项可能...
Sex boosts brain growth, study suggests
cindylu520的专栏
07-30 1万+
Sex apparently can help the brain grow, according to new findings in rats. Past findings had shown that stressful, unpleasant events could stifle brain cell growth in adults. To see if pleasant albei...
xxxxxxxxxxxxxxxxxxxxxxxxxxxx
热门推荐
weixin_34273481的博客
04-05 70万+
Get Authorization code:Request: https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=https%3A%2F%2Fdevelopers.google.com%2Foauthplayground&prompt=consent&response_type=code&client_id=...
js中json的转换
weixin_33872660的博客
10-13 813
//aa='{"id":0,"appId":"app***********Id","appSecret":"appSexxxxxxxxxrcret","addBalance":111,"updateTime":0}'; var b = JSON.parse(aa); //将字符串类型的json字符串转换对json对...
根据身份证号获取出生日期，年龄，性别
geaosu的博客
12-10 5431
java语言，根据身份证号获取出生日期，年龄，性别 // 测试程序 public class TestUtils { public static void main(String[] args) { String idcard = "xxxxxxxxxxxxxxxxxx";// 不方便透露的身份证号码 String birthday = IDCardUtils.getBirthday(idcard); int age = IDCardUtils.get
Android仿淘宝、京东Banner滑动查看图文详情
小马快跑的博客
10-01 2188
本文基于ViewPager2实现的Banner效果，进而实现了仿淘宝、京东Banner滑动至最后一页时继续滑动来查看图文详情的效果。
第三方登录说明
minenamewj的专栏
05-13 674
一微信登录说明1.端内向微信请求信息，取到微信客户端返回信息：{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE" }2.服务器拿到这些信息向微信
MySQL
weixin_30307921的博客
10-10 212
MySQL 查询系统时间 SELECT SYSDATE(); R: 2018-01-26 14:05:41 注释 -- xxxxxxxxxxxxxx SQL分类数据定义语言DDL数据操作语言DML事物控制语言TCL数据查询语言DQL数据控制语言DCL 事务控制语言 用来维护数据一致性的语句 SQL 语句中关键字大写 非关键字小写 MySQL 数据类型 数值类...
MVC中单选按钮的实现
weixin_30666943的博客
12-17 837
-------------控制器-------------- ViewBag.Kinds = SYS_Category.List(xxxxxxxxxxxxxxxxxxxxxxx); --------------视图-------------- <tr> 　　<th>选择分类:</th> 　　...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值