仿天猫双12主页广告部分

最新推荐文章于 2024-04-23 21:46:57 发布

梵海pp

最新推荐文章于 2024-04-23 21:46:57 发布

阅读量417

点赞数

分类专栏： jQuery例子练习文章标签： bootstrap 天猫广告

本文链接：https://blog.csdn.net/m0_37460263/article/details/59123016

版权

jQuery例子练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

运用了Bootstrap来布局

这里写图片描述

该部分分为左右两块DIV
左DIV实现的是鼠标移动到下方的一个轮播图上的图片时整块DIV背景跟随变化。轮播图有左右按钮，当按下右按钮时轮播新的三张图并且右按钮隐藏左按钮显示。轮播图下方是一个自动向上滚动的一串 li 实现信息推送。
var index;
var opic_1=$(“.run_1 li”);
```
 for(var i=0;i<opic_1.length;i++){
     opic_1[i].index=i;
         $(opic_1[i]).mouseover(function(){ 
          $('.sport_1img').attr("src",$(this).children('img').attr('src')); 
                });
     };`
```
这是运用索引找到了当前轮播图上鼠标处于其上位置的DIV当前背景图，然后让其父亲DIV背景换为一样的代码。

右DIV实现的是一系列商标的导航（这里用了随机图片作为背景）。布局为一连串DIV使其浮动，然后在各DIV中增加一个shadow阴影层DIV，使其hidde隐藏，当鼠标移动到其中一个DIV上时让当前的DIV的shadow层显示。shadow层中写入button按钮设置链接可跳转，并有关注收藏按钮。然后设置给DIV的边距实现友好的DIV布局（这里的布局稍有瑕疵）。

    var osignArr=$(".signArr_pic");
                    for(var i=0;i<osignArr.length;i++){

                        $(osignArr[i]).hover(function(){
                                  $(this).children('.shadow').stop().animate({"opacity":0.7},300); 
                        },function(){
                                  $(this).children('.shadow').stop().animate({"opacity":0},300);
                        });
                        }

                        $('.te_shadow').mouseover(function(){
                               $(this).stop().animate({"opacity":0.5},110);
                               $('.te_run ul li').css("color","red");
                        });

                        $('.te_shadow').mouseout(function(){
                               $(this).stop().animate({"opacity":0},110);
                               $('.te_run ul li').css("color","#000000");
                        });

$(this).stop().animate({“opacity”:0.5},110);
在之前的网页练习中很容易出现一个问题，就是当执行一个特效的时候（例如二级菜单的下拉显示动画，对象的运动或者背景的变化）当鼠标多次快速的往返于两个特效对象上，该对象会多次的执行特效尽管鼠标离开后特效仍然执行。为了避免这种问题发生只需要在运动语句前增加一个.spot()停止语句便可。

这里写图片描述

该部分实现的是当鼠标移动到广告图片部分上时，图片会按一个自定义的比例放大，鼠标移开时图片变为原来大小。实现一个广告的立体推送。
这里运用了CSS3的 transition和 transform属性。一个小的属性就可以体现出CSS3的强大之处。

.ad_main_2 img{
                  position: absolute;
                  width: 70px;
                  height: 90px;
                  left: 60px;
                  top: 95px;
                  transition: all 0.4s;所有对象执行时间0.4s
             }
.ad_main_2 img:hover{
                  transform: scale(1.2);按1.2倍比例放大
             }

这里写图片描述

这个是一个广告模板，天猫官网主页上有很多重复的，可以载入不同类型的广告。
左侧是一个有shadow层的DIV，鼠标移动到其上时shadow层显示并且下方字体颜色改变。中间是一个无缝滚动的 li，li里有超链接可以实现跳转。
右侧是一连串的DIV广告块布局，这里调整了各DIV的边框使其布局更加好看并不是每一个DIV的上下左右边框都有，直观看上去更加的友好。
当鼠标移动到中间图片上时图片会左移一段距离，鼠标离开后回到原位置。这里用到了CSS3的transition和 transform属性。也可以用Js实现，不过运用CSS3代码会少一点。

.te_mid_content img{
    width: 90px;
    height: 110px;
    margin-left:112px ;
    margin-top:10px;
    transition: all 0.6s;
}
.te_mid_content img:hover{
        transform: translateX(-10px);按X轴左移10px
}

附上代码

样式代码

*{
margin: 0;
padding: 0;
}
body{
background: rgb(202,50,190);
height: 2000px;
}
.box{
width: 1000px;
}
.pic1{
height: 300px;
width: 120px;
float: left;
}
.pic1 img{
height: 300px;
width: 180px;
border-radius: 5px;
}

                .pic2{
                    height: 300px;
                    width: 300px;
                    margin-left: 72px;
                    float: left;
                }
                .pic2 img{
                    width: 300px;
                    height: 145px;
                    border-radius: 5px;
                }
              .sport{
                width: 400px;
                height: 400px;
                margin-top: 80px;
                background: #000000;
                float: left;
              }
              .sport_1{
                width: 400px;
                height: 250px;


              }
              .sport_1 img{
                width: 400px;
                height: 250px;
              }
              .sport_2{
                width: 400px;
                height: 90px;
               margin-top: 0px;

                position: relative;
                overflow: hidden;
              }
             .sport_2 .run_1{
                width: 400px;
                height: 90px;
                margin-top: -10px;
              }
              .sport_2 .run_1 img{
                width:130px ;
                height: 90px;
              }
               .sport_2 .run_1 ul{
                width: 1000px;

              }
              .sport_2 .run_1 li{
                 width: 130px;
                 height: 90px;
                 background: #FFFF00;
                 list-style: none; 
                 float: left;
              }
              .sport_btn_box{
                height: 90px;
                width: 30px;

                z-index: 1;
             } 
               .sport_btn{
                height: 90px;
                width: 30px;
                background: #CCCCCC;
                position: absolute;
                opacity: 0.7;
             } 
             .act{
                opacity: 0;
             }
             .pos{
                left: 369px;
             }
             .sport_3{
                width: 400px;
                height: 50px;
                overflow: hidden;
             }
             .sport_3 ul{
                margin-top: 5px;
                margin-left: 20px;
                 list-style: none;
                 color: #FFFFFF;
                 float: left;
             }
            .text{
                height: 30px;
                width: 50px;
                margin-left: -15px;
                margin-top: 10px;
              transform: rotate(90deg);
               float: left;
             }
             .text span{
                color: #D9534F;
             }
             .hr{
                width: 5px;
                height: 20px;
                border-right: 1px solid #333333;
                margin-left: -5px;
                margin-top: 18px;
                float: left;
             }
             .sign{
                color: #FFFFFF;
                margin-left: 10px;
                margin-top: 20px;
             }
               .run_2{
                width: 275px;
                height: 50px;
               margin-left: 120px;
               margin-top: -32px;

              }
               .sport_2 .run_2 ul{
               height: 160px;
              }
              .run_2 ul li{
                 width: 255px;
                 height: 60px;
                 margin-top: 0px;
                 list-style: none;
              }
              .run_2_font1{
                margin-left: -10px;

                color: #FFFFFF;
              }
              .run_2_font2{
                margin-left: -10px;
                color: #C7254E;
              }
              .signArr{
                width: 600px;
                height: 400px;
                background: #ffffff;
                margin-top: 80px;
                float: left;
              }
              .signArr_pic{
                width: 119px;
                height: 100px;
                border-bottom: 1px solid #FFFFFF;
                float: left;
              }
             .signArr_pic img{
                  width: 119px;
                height: 98px;
             } 
             .add_left{
                margin-left: 5px;
             }
             .add_top{
                height: 100px;
             }
             .shadow{
                 position: absolute; 
                 width: 119px; 
                 height: 98px;
                 background:#000000;
                 opacity: 0;
             }

             .shadow_sign{
                position: absolute;
                top:10px;
                right: 5px;
                cursor:pointer;
                color: red;
                z-index: 1;
             }
             .shadow_padge{
                color: #FFFFFF;
               background: rgb(255,255,255,0.9);
             }

             .shadow_btn{
                   margin-top: 5px;
                   width: 60px;
                   height: 20px;

             }
             .shadow_btn span{
             position: absolute;
             top: 57px;
             left: 35px;
                font-size: 10px;
             }
             .ad_box{
                width: 1000px;
                height: 500px;
             }
             .ad{
                width: 192px;
                height: 390px;
                margin-left:10px;
                background: #FFFFFF;
                position: relative;
                float: left;
             }
             .ad_padding{
                  margin-left: 0px;
             }
             .ad_row{
                margin-top: 30px;
                position: relative;
             }
             .ad_buttom{
              clear: left;
                width: 1000px;
                height: 100px;
                position: absolute;
                top: 400px;
             }
             .ad_main_1{
                 height: 30px;
                 width: 192px;
                 background: #FF0000;
             }
             .ad_main_1 img{
                  width: 25px;
                  height: 25px;
                  margin-top: 2px;
                  margin-left: 35px;
             }
             .ad_main_1 .ad_text_1{
                 color: #FFFFFF;
                 display: block;
                 margin-top: -22px;
                 margin-left: 80px;
             }
             .ad_main_2{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background: #E6E6FA;
                margin: auto;
                margin-top: 5px;
             }
             .ad hr{
                  width: 160px;
                  margin: auto;
                  margin-top: 10px;
             }
             .ad_text_2{
                display: block;
                  margin-left:75px;
                  margin-top: 10px;
                  font-size: 20px;
             }
             .ad_text_3{
                display: block;
                  margin-left:60px;
                  margin-top: -20px;
                  font-size: 10px;
                  color: #CCCCCC;
             }
            .ad_add_text{
                margin-left: 55px;
            }
            .ad_main_2 img{
                position: absolute;
                  width: 70px;
                  height: 90px;
                  left: 60px;
                  top: 95px;
                  transition: all 0.4s;
            }
            .ad_main_2 img:hover{
                     transform: scale(1.2);
            }
            .ad_add_Img_top img{
                top: 266px;
            }
            .ad_buttom img{
                width: 1000px;
                height: 100px;
            }
            .template{
                width: 1000px;
                height: 400px;
                margin-top: 30px;
            }
            .template_top{
                width: 1000px;
                height: 20px;
                border-left: 6px solid  #C92222;
            }
            .template_left{
                width: 200px;
                height: 380px;
                background:url(img/6.jpg);
                position: relative;
                float: left;
            }
            .template_mid{
                width: 600px;
                height: 380px;
                background:#FFFFFF;
                float: left;
            }
            .template_right{
                width: 200px;
                height: 380px;
                background:#FFFFFF;
                float: left;
            }
            .te_top_text_1{
                font-size: 15px;
                margin-left: 5px;
            }
            .te_top_text_2{
                font-size: 10px;
                margin-left: 5px;
            }
            .template_top ul{
                margin-top: -21px;
                margin-left: 430px;
            }
            .template_top li {
                margin-left: 25px;
                list-style: none;
                float: left;
            }
            .template_top a{
                font-size: 10px;
                color: #000000;
            }
            .te_shadow{
                width: 200px;
                height: 380px;
                position: absolute;
                background: #cccccc;
                opacity: 0;
            }
            .te_run{
                width: 200px;
                height: 25px;
                position: absolute;
                top: 250px;
                background: #FFFFFF;
              overflow: hidden;
              opacity: 0.5;
            }
            .te_run ul{
                margin-top: 3px;
                margin-left: 10px;
            }
            .te_run li{

                list-style: none;
                color: #000000;
                font-size: 15px;
            }
            .te_buttom{
                width: 200px;
                height: 105px;
                margin-top: 275px;
                background: #C92222;
                opacity: 0.7;
            }
            .te_left_text_1{
                font-size:18px;
                color: #FFFFFF;
            }
            .te_left_text_2{
                font-size:16px;
                color: #FFFFFF;
            }
            .te_mid_content{
                width: 199px;
                height: 190px;
                border: 1px solid #CCCCCC;
                border-top: 0px ;
                border-right: 0px;
                float: left;
            }
            .add_border{
                border-bottom: 0px;
            }
            .te_add_content_width{
                border-left: 0px;
                width: 202px;
            }
            .te_mid_content_text_1{
                margin-left: 20px;
                font-size: 15px;
            }
            .te_mid_content_text_2{
                color: #FA8072;
                margin-left: 20px;
                font-size: 10px;
            }
            .te_mid_content img{
                width: 90px;
                height: 110px;
                margin-left:112px ;
                margin-top:10px;
                transition: all 0.6s;
            }
            .te_mid_content img:hover{
                    transform: translateX(-10px);
            }
            .te_mid_content .mod_img{
                    margin-left:108px ;
            }
            .te_right_content{
                width:199px;
                height: 126px;
                border-left: 1px solid #CCCCCC ;
                border-bottom: 1px solid #CCCCCC;
            }
             .add_border_bottom{
                border-bottom: 0px;
            }
            .add_te_right_height{
                height: 127px;
            }
            .te_right_content img{
                width: 50px;
                height: 70px;
                margin-left: 149px;
                margin-top: -10px;
                transition: all 0.6s;
            }
            .te_right_content img:hover{
                    transform: translateX(-10px);
            }
            .add_sign_top{
                margin-top: -1px;

布局代码

 <body>
      <div class="container box">

        <!--    描述：第一部分 top-->
        <div class="row visible-lg visible-md" >

             <div class="pager">
                <img src="img/9.png" />
             </div> 
              <div class="pic1">
                   <img src="img/2.jpg"  "/>
              </div>
              <div class="pic2">
                   <img src="img/3.jpg" />
                   <img src="img/4.jpg" style="margin-top: 10px;" />
              </div>
              <div class="pic1" style="margin-left: 13px;">
                   <img src="img/2.jpg"  "/>
              </div>
              <div class="pic2">
                   <img src="img/3.jpg" />
                   <img src="img/4.jpg" style="margin-top: 10px;" />
              </div>
        </div>

        <!--    描述：第二部分 sport -->
       <div class="row">
          <div class="sport">
              <div class="sport_1">
                 <img src="img/1.jpg" />
              </div>
              <div class="sport_2">
                    <button class="btn btn-default sport_btn act">←</button>
                    <button class="btn btn-default sport_btn  pos">→</button>
                <div class="run_1">

                    <ul>
                        <li>
                            <img src="img/1.jpg" />
                        </li>
                        <li style="margin-left: 5px;"><img src="img/3.jpg" /></li>
                        <li style="margin-left: 5px;"><img src="img/4.jpg" /></li>
                        <li><img src="img/5.jpg" /></li>
                        <li style="margin-left: 5px;"><img src="img/6.jpg" /></li>
                        <li style="margin-left: 5px;"><img src="img/7.jpg" /></li>
                    </ul>
                </div>

              </div>
              <div class="sport_3">
                    <ul>
                        <li>直播</li>
                        <li>预告</li>
                    </ul>

                    <div class="text"><center><span>LIVE</span></center></div>
                    <div class="hr"></div>  
                        <span class="glyphicon glyphicon-volume-up  sign"></span>

                    <div class="run_2">
                        <ul>
                            <li ><span class="run_2_font1">肯德基老爷爷爱吃大鸡排</span><br/>
                                <span class="run_2_font2">12月12日</span></li>
                            <li ><span class="run_2_font1">肯德基老爷爷爱吃大鸡排</span><br/>
                                <span class="run_2_font2">12月12日</span></li>
                            <li ><span class="run_2_font1">肯德基老爷爷爱吃大鸡排</span><br/>
                                <span class="run_2_font2">12月12日</span></li>
                        </ul>
                    </div>

              </div>
          </div>
       <div class="signArr">
              <div class="signArr_pic add_left add_height  add_sign_top">
                <div class="shadow">    
                        <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/1.jpg" />
              </div>
               <div class="signArr_pic add_height add_sign_top">
                <div class="shadow">
                    <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/2.jpg" />
              </div>          
               <div class="signArr_pic add_height add_sign_top">
                <div class="shadow">    
                  <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/3.jpg" />
              </div>
               <div class="signArr_pic add_height add_sign_top">
                <div class="shadow">    
                    <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/4.jpg" />
              </div>
               <div class="signArr_pic add_height add_sign_top">
                <div class="shadow">
                    <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>       
                </div>
                <img src="img/5.jpg" />
              </div>
               <div class="signArr_pic add_left add_top">
                <div class="shadow shadow_add_height">  
                  <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/6.jpg" />
              </div>
               <div class="signArr_pic add_top">
                <div class="shadow shadow_add_height">  
                   <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/7.jpg" />
              </div>
               <div class="signArr_pic add_top">
                <div class="shadow shadow_add_height">  
                   <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/2.jpg" />
              </div>
               <div class="signArr_pic add_top">
                <div class="shadow shadow_add_height">  
                  <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/8.jpg" />
              </div>
               <div class="signArr_pic add_top">
                <div class="shadow shadow_add_height">  
                   <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/2.jpg" />
              </div>
               <div class="signArr_pic add_left add_top">
                <div class="shadow shadow_add_height">  
                   <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/3.jpg" />
              </div>
               <div class="signArr_pic add_top">
                <div class="shadow shadow_add_height">  
                   <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/4.jpg" />
              </div>
               <div class="signArr_pic add_top">
                <div class="shadow shadow_add_height">
                    <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>       
                </div>
                <img src="img/5.jpg"/>
              </div>
               <div class="signArr_pic add_top">
                <div class="shadow shadow_add_height">  
                   <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <imgsrc="img/1.jpg" />
              </div>
               <div class="signArr_pic add_top">
                <div class="shadow shadow_add_height">  
                   <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/6.jpg" />
              </div>
               <div class="signArr_pic add_left add_top">
                <div class="shadow">
                    <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/1.jpg" />
              </div>
               <div class="signArr_pic add_top">
                <div class="shadow">    
                  <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/8.jpg" />
              </div>
               <div class="signArr_pic add_top">
                <div class="shadow">
                     <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>

                </div>
                <img src="img/4.jpg" />
              </div>
               <div class="signArr_pic add_top">
                <div class="shadow">    
                  <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/2.jpg" />
              </div>
               <div class="signArr_pic add_top">
                <div class="shadow">    
                  <center>
                      <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                      <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                      <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                        </center>
                </div>
                <img src="img/1.jpg" />
              </div>
       </div>
       </div>

       <!-- 描述：第三部分 中部广告 -->
       <div class="row ad_row">
               <div class="ad_box">
                     <div class="ad ad_padding">
                             <div class="ad_main_1">
                                <img src="img/11.png" />
                                  <span class="ad_text_1"><b>潮&nbsp;流&nbsp;前&nbsp;沿</b></span>
                             </div>
                                <span class="ad_text_2">焕新</span>   <br />
                                <span class="ad_text_3">品牌精选新品</span>
                             <div class="ad_main_2">
                                       <img src="img/10.JPG" />
                             </div>
                             <hr />
                              <span class="ad_text_2 ad_add_text">全球时尚</span>   <br />
                                <span class="ad_text_3">大牌精致时尚</span>
                             <div class="ad_main_2 ad_add_Img_top">
                                        <img  src="img/10.JPG"/>
                             </div>
                     </div>
                     <div class="ad ">
                           <div class="ad_main_1">
                                <img src="img/12.png" />
                                  <span class="ad_text_1"><b>品&nbsp;质&nbsp;生&nbsp;活</b></span>
                             </div>
                                <span class="ad_text_2">焕新</span>   <br />
                                <span class="ad_text_3">品牌精选新品</span>
                             <div class="ad_main_2">
                                       <img src="img/10.JPG" />
                             </div>
                             <hr />
                              <span class="ad_text_2 ad_add_text">全球时尚</span>   <br />
                                <span class="ad_text_3">大牌精致时尚</span>
                             <div class="ad_main_2 ad_add_Img_top">
                                        <img  src="img/10.JPG"/>
                             </div>
                     </div>
                     <div class="ad ">
                           <div class="ad_main_1">
                                <img src="img/13.png" />
                                  <span class="ad_text_1"><b>美&nbsp;食&nbsp;乐&nbsp;园</b></span>
                             </div>
                                <span class="ad_text_2">焕新</span>   <br />
                                <span class="ad_text_3">品牌精选新品</span>
                             <div class="ad_main_2">
                                       <img src="img/10.JPG" />
                             </div>
                             <hr />
                              <span class="ad_text_2 ad_add_text">全球时尚</span>   <br />
                                <span class="ad_text_3">大牌精致时尚</span>
                             <div class="ad_main_2 ad_add_Img_top">
                                        <img  src="img/10.JPG"/>
                             </div>
                     </div>
                     <div class="ad ">
                           <div class="ad_main_1">
                                <img src="img/14.png" />
                                  <span class="ad_text_1"><b>国&nbsp;际&nbsp;海&nbsp;购</b></span>
                             </div>
                                <span class="ad_text_2">焕新</span>   <br />
                                <span class="ad_text_3">品牌精选新品</span>
                             <div class="ad_main_2">
                                       <img src="img/10.JPG" />
                             </div>
                             <hr />
                              <span class="ad_text_2 ad_add_text">全球时尚</span>   <br />
                                <span class="ad_text_3">大牌精致时尚</span>
                             <div class="ad_main_2 ad_add_Img_top">
                                        <img  src="img/10.JPG"/>
                             </div>
                     </div>
                     <div class="ad ">
                           <div class="ad_main_1">
                                <img src="img/15.png" />
                                  <span class="ad_text_1"><b>电&nbsp;子&nbsp;酷&nbsp;玩</b></span>
                             </div>
                                <span class="ad_text_2">焕新</span>   <br />
                                <span class="ad_text_3">品牌精选新品</span>
                             <div class="ad_main_2">
                                       <img src="img/10.JPG" />
                             </div>
                             <hr />
                              <span class="ad_text_2 ad_add_text">全球时尚</span>   <br />
                                <span class="ad_text_3">大牌精致时尚</span>
                             <div class="ad_main_2 ad_add_Img_top">
                                        <img  src="img/10.JPG"/>
                             </div>
                     </div>
                     <div class="ad_buttom">
                           <img src="img/9.png" />
                     </div>
               </div>
       </div>

      <!--  描述：第三部分 模板广告 -->
      <div class="row template">
            <div class="template_top">
                 <span class="te_top_text_1">美丽人生</span> <span class="te_top_text_2">FASHION & BEAUTY</span>
                 <ul>
                      <li ><a href="#">连衣裙</a></li>
                      <li ><a href="#">T恤男</a></li>
                      <li><a href="#">美容护肤</a></li>
                      <li><a href="#">休闲男鞋</a></li>
                      <li><a href="#">黄金项链</a></li>
                      <li><a href="#">单鞋</a></li>
                      <li><a href="#">女包</a></li>
                      <li><a href="#">文胸</a></li>
                      <li><a href="#">大牌腕表</a></li>       
                 </ul>
            </div>
            <div class="template_left">
                   <div class="te_shadow"></div>
                   <div class="te_run">
                       <ul>
                            <li><span>欧时力15日0时抢></span></li>
                            <li><span>抢完加微信w15829357178></li>
                                <li><span>欧时力15日0时抢></span></li>
                       </ul>
                   </div>
                   <div class="te_buttom">
                    <center>
                            <br />
                          <span class="te_left_text_1"><b>神秘大牌5日首降</b></span> <br />
                          <span class="te_left_text_2">女装新品五折抢</span>
                    </center>
                   </div>
            </div>
            <div class="template_mid">
                    <div class="te_mid_content te_add_content_width">
                        <br />
                           <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                           <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                           <img src="img/16.png" />
                    </div>
                    <div class="te_mid_content te_add_content_height ">
                          <br />
                           <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                           <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                           <img class="mod_img"  src="img/16.png" />
                    </div>
                    <div class="te_mid_content  ">
                            <br />
                           <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                           <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                           <img class="mod_img" src="img/16.png" />
                    </div>
                    <div class="te_mid_content add_border te_add_content_width">
                          <br />
                           <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                           <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                           <img src="img/16.png" />
                    </div>
                    <div class="te_mid_content te_add_content_height add_border ">
                          <br />
                           <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                           <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                           <img  class="mod_img" src="img/16.png" />
                    </div>
                    <div class="te_mid_content add_border ">
                          <br />
                           <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                           <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                           <img class="mod_img" src="img/16.png" />
                    </div>
            </div>
            <div class="template_right visible-lg visible-md">
                  <div class="te_right_content add_te_right_height">
                         <br />
                           <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                           <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                         <img  src="img/16.png" />
                  </div>
                  <div class="te_right_content add_te_right_height">
                     <br />
                           <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                           <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                         <img  src="img/16.png" />
                  </div>
                  <div class="te_right_content add_border_bottom">
                      <br />
                           <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                           <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                         <img  src="img/16.png" />
                  </div>
            </div>
      </div>
      </div>
</body>

jQuery代码

 <script>
        $(function(){
             $(".pos").click(function(){            
                       $(this).css("opacity","0");
                       $(".act").css("opacity","0.7");
                       $(".run_1").animate({"margin-left" : '-100%'},200);
             });

             $(".act").click(function(){            
                       $(this).css("opacity","0");
                       $(".pos").css("opacity","0.7");
                       $(".run_1").animate({ "margin-left": '0'},200);
             });
             var index;
             var opic_1=$(".run_1 li");

             for(var i=0;i<opic_1.length;i++){
                        opic_1[i].index=i;
                        $(opic_1[i]).mouseover(function(){   
                    $('.sport_1 img').attr("src",$(this).children('img').attr('src')); 
                        });
             };


            var m=1;
         var timer_1=null;
           timer_1=setInterval(function(){

                             if(m==3){
                                 m=0;
                                 $('.run_2 ul li').eq(0).css('margin-top','0px');
                             }
                            $('.run_2 ul li').eq(0).animate({"margin-top":-60*m},150);
                            m++;
                   },2000);


                        var osignArr=$(".signArr_pic");
                    for(var i=0;i<osignArr.length;i++){

                        $(osignArr[i]).hover(function(){
                                  $(this).children('.shadow').stop().animate({"opacity":0.7},300); 
                        },function(){
                                  $(this).children('.shadow').stop().animate({"opacity":0},300);
                        });
                        }

                        $('.te_shadow').mouseover(function(){
                               $(this).stop().animate({"opacity":0.5},110);
                               $('.te_run ul li').css("color","red");
                        });

                        $('.te_shadow').mouseout(function(){
                               $(this).stop().animate({"opacity":0},110);
                               $('.te_run ul li').css("color","#000000");
                        });

                   var  time_2=null;
                   var n=1;
                       time_2=setInterval(function(){

                        if(n==3){
                            n=1;
                            $('.te_run li').eq(0).css("margin-top","-2px");
                        }
                        $('.te_run li').eq(0).animate({"margin-top":-22*n},300)
                        n++;
                       },2500);
        });
   </script>

梵海pp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿天猫双12主页广告部分

运用了Bootstrap来布局该部分分为左右两块DIV 左DIV实现的是鼠标移动到下方的一个轮播图上的图片时整块DIV背景跟随变化。轮播图有左右按钮，当按下右按钮时轮播新的三张图并且右按钮隐藏左按钮显示。轮播图下方是一个自动向上滚动的一串 li 实现信息推送。 var index; var opic_1=$(“.run_1 li”); for(var i=0;i<opic_1.length;
复制链接

扫一扫