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 相关文章推荐
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
vue图片上传组件使用详解
Dec 23 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 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
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
php抽象类用法实例分析
2015/07/07 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
OpenCV 边缘检测
2019/07/10 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
耐克中国官方商城:Nike中国
2018/10/18 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
服务员自我评价
2014/01/25 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
酒店员工培训方案
2014/06/02 职场文书
新学期家长寄语2016
2015/12/03 职场文书
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python