jQuery实现花式轮播之圣诞节礼物传送效果

网络编程 2021-07-04 19:20www.168986.cn编程入门

这篇文章主要介绍了jQuery实现花式轮播之圣诞节礼物传送效果,需要的朋友可以参考下

旋转出发，旋转到达。鼠标经过停止，点击拆礼物！

写的比较简单，喜欢点赞收藏哦。

请在谷歌等高版本浏览器打开^-^

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圣诞礼物传送轮播</title>
  <style>
    html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
    .cr{
      width: 100%;
      position: relative;
      background: url("http://cdn.attach.qdfuns./notes/pics/201612/15/174106gbm3famm0piq62mm.png") no-repeat 0 0;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      overflow: hidden;
    }
    .cr-l,.cr-r{
      position: absolute;
      bottom:10%;
      width: 20.8%;
      height: 70%;
      z-index:100;
    }
    .cr-l img,.cr-r img{
      width: 100%;
      position: absolute;
      :50%;
    }
    .cr-l{
      left: 0;
    }
    .cr-r{
      right:0;
    }
    .cr-icon{
      bottom: 15%;
      left:0;
      position: absolute;
      z-index: 1000;
      width: 100%;
      height: 70%;
      text-align: center;
    }
    .cr-icon img{
      margin-right: 25px;
      width: 10%;
      vertical-align: ;
      position: absolute;
      bottom: 0;
      opacity: 1;
      transform:rotate(0deg);
      transition: all 1s;
    }
    .cr-icon img:first-child{
      transform:rotate(-90deg);
      -webkit-transform:rotate(-90deg);
      opacity: 0;
      width: 0;
    }
    .cr-icon img:last-child{
      transform:rotate(90deg);
      -webkit-transform:rotate(90deg);
      opacity: 0;
      width: 0;
    }
  </style>
</head>
<body>
  <div class="cr">
    <div class="cr-l"><img src="http://cdn.attach.qdfuns./notes/pics/201612/15/174103o5zx1pzh4x1pcb.png" alt=""/></div>
    <div class="cr-icon">
      <div id="cr-icon">
        <img style="left:5%" src="http://cdn.attach.qdfuns./notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/>
        <img style="left:25%" src="http://cdn.attach.qdfuns./notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/>
        <img style="left:45%" src="http://cdn.attach.qdfuns./notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/>
        <img style="left:65%" src="http://cdn.attach.qdfuns./notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/>
        <img style="left:85%" src="http://cdn.attach.qdfuns./notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/>
      </div>
    </div>
    <div class="cr-r"><img src="http://cdn.attach.qdfuns./notes/pics/201612/15/174103dz0uhvec7nbunqwc.png" alt=""/></div>
  </div>
  <script src="http://apps.bdimg./libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(".cr-icon img").click(function(){
      if($(this).attr("src") == "http://cdn.attach.qdfuns./notes/pics/201612/15/174103e22y4zbkhi47bi2w.png"){
        $(this).attr("src","http://cdn.attach.qdfuns./notes/pics/201612/15/174103ciomobruzrkbhhs5.png");
      }else{
        $(this).attr("src","http://cdn.attach.qdfuns./notes/pics/201612/15/174103e22y4zbkhi47bi2w.png");
      }
    });
    $(function() {
      var end = document.body.clientWidth;
      var height = document.body.scrollHeight;
      $(".cr").css("height",height);
      function scrollLogo() {
        $("#cr-icon img").each(function () {
          var left = parseInt($(this).css("left"));
          left += end  0.2;
          $(this).css("left", left + "px");
        });
        $("#cr-icon img:last").insertBefore($("#cr-icon img:first")).css("left", document.body.clientWidth  0.05).fadeIn();
      }
      setTimeout(scrollLogo,0);
      var scroll = setInterval(scrollLogo, 1500);
      $("#cr-icon img").mouseenter(function () {
        clearInterval(scroll);
      });
      $("#cr-icon img").mouseleave(function () {
        scroll = setInterval(scrollLogo, 1500);
      });
    });
  </script>
</body>
</html>

效果图如下所示

以上所述是长沙网络推广给大家介绍的jQuery实现花式轮播之圣诞节礼物传送效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！

上一篇：js实现hashtable的赋值、取值、遍历操作实例详解下一篇：AngularJS入门教程之Helloworld示例

jQuery实现花式轮播之圣诞节礼物传送效果

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

jQuery实现花式轮播之圣诞节礼物传送效果

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设