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 相关文章推荐
Javascript 自定义类型方法小结
Mar 02 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
js回文数的4种判断方法示例
Jun 04 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
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 一个比较完善的简单文件上传
2010/03/25 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
js友好的时间返回函数
2016/08/24 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
Python编程中的异常处理教程
2015/08/21 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
浅谈django channels 路由误导
2020/05/28 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
小学清明节活动方案
2014/03/08 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
税务会计岗位职责
2015/04/02 职场文书