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 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
原生JS实现$.param() 函数的方法
Aug 10 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
vue实现登录功能
Dec 31 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之短标签开启设置
2013/06/17 PHP
php实现的xml操作类
2016/01/15 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
Python字符串处理函数简明总结
2015/04/13 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
python实现画图工具
2020/08/27 Python
Python内置函数property()如何使用
2020/09/01 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
农场厂长岗位职责
2013/12/28 职场文书
料理师求职信
2014/01/30 职场文书
学生党支部先进事迹
2014/02/04 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
毕业设计致谢语
2015/05/14 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
SQL中的连接查询详解
2022/06/21 SQL Server