模仿tmall首页live div

最新推荐文章于 2026-06-25 21:45:00 发布

原创最新推荐文章于 2026-06-25 21:45:00 发布 · 748 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html #动画 #javascript

Web前端专栏收录该内容

7 篇文章

订阅专栏

大概有三块 1个自动轮播用的css @keyframes 动画，

一个手动轮播用js写得，

还有一个hover电视机图像放大的因为是hover完了放大在缩小也是用的@keyframes;

还有一个轮播条隐藏快用了一个absolute的width：1002 的框包住，absolute这样就不会吃后面的元素了。

效果是这样
这里写图片描述
html

直播中

         <p id="main-coverp">很多衣服呀 哇</p>
         <a class="big-play-btn">
              <img class="tv" src="img/tv.png">
         </a> 
    </div>
    <img id="maincoverimg" src="img/cover1.jpg_.webp">
  </div>




  <div class="live-list-con">
    <a  id="sliderright"></a>
    <a  id="sliderleft"></a>

         <div class="cover-con">
               <p>1111</p>
               <a class="small-play-btn">
                    <img class="tv" src="img/tv.png">
              </a><img class="coverimg"           src="img/cover1.jpg_.webp">

         </div>

         <div class="cover-con mid-cover">
           <p>22222</p>
               <a class="small-play-btn">
                    <img class="tv" src="img/tv.png">
              </a><img class="coverimg"           src="img/cover2.jpg_.webp">
         </div>

         <div class="cover-con">
           <p>33333333</p>
               <a class="small-play-btn">
                    <img class="tv" src="img/tv.png">
              </a><img class="coverimg"           src="img/cover3.jpg_.webp">
         </div>

         <div class="cover-con">
           <p>4444444</p>
               <a class="small-play-btn">
                    <img class="tv" src="img/tv.png">
              </a><img class="coverimg"           src="img/cover4.jpg_.webp">
         </div>

         <div class="cover-con mid-cover">
           <p>5555555</p>
               <a class="small-play-btn">
                    <img class="tv" src="img/tv.png">
              </a><img class="coverimg"           src="img/cover5.jpg_.webp">
         </div>

         <div class="cover-con">
           <p>66666666</p>
               <a class="small-play-btn">
                    <img class="tv" src="img/tv.png">
              </a><img class="coverimg"           src="img/cover6.jpg_.webp">
         </div>

       </div>
   <!--  </div> -->
  </div>





 <div  id="live-fore-castlist">
      <div id="fore-castlist-logo">
        <img src="img/live.png">
      </div>
      <div id="fore-castlist-con">
                    <ul>
                      <li>
                          <p>1111111111</p>
                          <p>4月5日</p>
                      </li>

                       <li>
                          <p>2222222</p>
                          <p>4月5日</p>
                      </li>

                       <li>
                          <p>33333333</p>
                          <p>4月5日</p>
                      </li>

                       <li>
                          <p>4444444</p>
                          <p>4月5日</p>
                      </li>

                    </ul>
      </div>
  </div>

css

#allcover-con
{   display: inline-block;
    position: relative;
    width:488px;
    height: 436px;
    overflow: hidden;
    background-color: black;
}
#main-cover
{   position: relative;
    width:488;
    height: 275px;
    background:url(img/cover1.jpg_.webp) no-repeat;
    background-size:488px 275px;
    margin-bottom:7px;

}
#main-coverp
{    color:#fff;
    display: inline-block;
    width:100%;
    text-align:center;
    position: absolute;
    bottom:25px;
    font-size: 24px;

}


.live-list-con
{
    position: relative;
    background-color: black;
    width: 100%;
    height: 90px;
  overflow: hidden;
}
#cover-width
{    display: inline-block;
    position: absolute;
    width:980px;

    transition:all .5s;
}

@keyframes smalltvcarton
{
    0% {width:34.99px;height: 25.99px;}
    50% {width:48px;height:34px;}
    100%  {width:34.99px;height:25.99px;}
}
.cover-con
{   position: relative;
    float: left;
    width: 159px;
    height: 90px;
    background-color: black;
}
.cover-con:hover .small-play-btn
{ 
    z-index:99;
    animation:smalltvcarton .4s 1;

} 
.cover-con:hover .coverimg
{
    opacity:0.5;
}
.cover-con p
{  display: inline-block;
   position: absolute;
   color:#fff;
   bottom:6px;
   margin-left: 10px;
   overflow: hidden;
}
 #livinglogo
{   position:absolute;
    right: 15px;
    top:15px;
    width:51px;
    height: 20px;
    background-color:rgba(0,0,0,.6);
    border-radius:10px;
    font-size: 12px;
    color:#fff;
    padding-left: 18px;
    padding-top: 2px;
}
#livinglogo  span
{   position: absolute;
    top:6.5px;
    left:8px;
    display: block;
    width:8px;
    height: 8px;
   background: url(img/living.png) no-repeat;

}
.mid-cover
{
    margin: 0 5.5px 0 5.5px;
}
.coverimg
{
    width: 100%;
    height: 100%;
}
#maincoverimg
{
    width:100%;
    height: 100%;
}
#sliderright
{  position: absolute;
    width:17px;
    height: 90px;
    display: block;
    right:0px;
    background:url(img/sliderright.png);
    z-index: 99;
}
#sliderleft
{
     position: absolute;
    width:17px;
    height: 90px;
    display: none;
    left:0px;
    background:url(img/sliderleft.png);
    z-index: 99;
}
.cover-de
{

    height: auto;
}
@keyframes tvcarton
{
   0%   {width:70px;height: 57px;}
   50%  {width:91px;height:74.1px;}
   100% {width:70px;height: 57px;}
}
.big-play-btn
{   position: absolute;
    display: inline-block;
    width:70px;
    height: 57px;
    background-position: center;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.small-play-btn
{
    position: absolute;
    display: inline-block;
    width:35.99px;
    height: 25.49px;
    background-position: center;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:-999;

}

.tv
{
    width:100%;
    height: 100%;
}
#main-cover:hover .big-play-btn
{ 
      animation:tvcarton .4s 1;
     /*width:105px;
*/};


#fore-castlist-con
{
    position: absolute;
}
#live-fore-castlist
{   margin-top:10px;
    margin-left:21px;
    width:390px;
    height: 40px;
    overflow: hidden;
}
#fore-castlist-logo
{   margin: 4px 9px 0 0;
    width:91px;
    height: 31px;
    float:left;
}
#fore-castlist-logo img
{
    width:100%;
    height: 100%;
}
#fore-castlist-con
{   float:left;
   width:289px;
   height: 40px;
   overflow: hidden;
}

@keyframes livelist
{
    0% {transform:translateY(0px);}
    12.5% {transform:translateY(-0px);}
    25% {transform:translateY(-40px);}
    37.5% {transform:translateY(-40px);}
    50% {transform:translateY(-80px);}
    62.5% {transform:translateY(-80px);}
    75% {transform:translateY(-120px);}
    87.5% {transform:translateY(-120px);}
    100%{transfrom:translateY(-0px);}   
}
#fore-castlist-con ul
{   /* position: absolute;*/
    display: block;
    width:300px;
    height: 160px;
   overflow:hidden;
   animation: livelist 8s infinite;


   /*transition:all .5s;*/

}
#fore-castlist-con li
{  display: block;
    width:300px;
    height:40px;

}
#fore-castlist-con p
{
    display: block;
    width:300px;
    height: 20px;
    color:#fff;
}
#fore-castlist-con p:nth-child(2)
{
   color:#FD4889;
}

js核心部分

 $('#sliderright').click(function(){
      $('#cover-width').css("transform","translateX(-488px)");
      $('#sliderright').css("display","none");
      $('#sliderleft').css("display","block");
     });


     $('#sliderleft').click(function(){
      $('#cover-width').css('transform','translateX(0px)');
      $('#sliderleft').css("display",'none');
      $('#sliderright').css("display",'block');
    });

   $('.coverimg').click(function(){

    var src=this.src;

    // var prev1=$(this).prevAll('p').text();
    // console.log(prev.text());
    // console.log(prev1.text());
    $('#maincoverimg').attr("src",src);
    $('#main-coverp').text($(this).prevAll('p').text());

   });