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


Posted in Javascript onDecember 25, 2016

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

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

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

<!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.com/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;
      top: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: top;
      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.com/notes/pics/201612/15/174103o5zx1pzh4x1ccpcb.png" alt=""/></div>
    <div class="cr-icon">
      <div id="cr-icon">
        <img style="left:5%" src="http://cdn.attach.qdfuns.com/notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/>
        <img style="left:25%" src="http://cdn.attach.qdfuns.com/notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/>
        <img style="left:45%" src="http://cdn.attach.qdfuns.com/notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/>
        <img style="left:65%" src="http://cdn.attach.qdfuns.com/notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/>
        <img style="left:85%" src="http://cdn.attach.qdfuns.com/notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/>
      </div>
    </div>
    <div class="cr-r"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/15/174103dz0uhvec7nbunqwc.png" alt=""/></div>
  </div>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(".cr-icon img").click(function(){
      if($(this).attr("src") == "http://cdn.attach.qdfuns.com/notes/pics/201612/15/174103e22y4zbkhi47bi2w.png"){
        $(this).attr("src","http://cdn.attach.qdfuns.com/notes/pics/201612/15/174103ciomobruzrkbhhs5.png");
      }else{
        $(this).attr("src","http://cdn.attach.qdfuns.com/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实现花式轮播之圣诞节礼物传送效果

以上所述是小编给大家介绍的jQuery实现花式轮播之圣诞节礼物传送效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
angular学习之动态创建表单的方法
Dec 07 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 #Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 #Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 #Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 #Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 #Javascript
JavaScript中数据类型转换总结
Dec 25 #Javascript
javascript实现用户点击数量统计
Dec 25 #Javascript
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
PHP 引用文件技巧
2010/03/02 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
Js apply方法详解
2017/02/16 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
Python编程求质数实例代码
2018/01/31 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
2014年教师节座谈会发言稿
2014/09/10 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
三峡大坝导游词
2015/01/31 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书