jQuery实现圣诞节礼物动画案例解析


Posted in Javascript onDecember 25, 2016

大致介绍

下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题

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

思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置最外边的两个礼物旋转一定的角度并隐藏,动画开始,每个礼物向右移动一定的位置,然后再把第五个礼物添加到第一个礼物之前,这样这五个礼物就重新排列了,在写jQ时只管礼物位置的变化就行了,因为礼物的旋转和隐藏在样式中都已经设置好了,某个礼物如果成为第一个礼物就会自动隐藏旋转

如果对其中的方法不熟悉的可以参考我写的jQuery学习之路,里面有讲解

 基本结构

 代码:

<div class="cr">
  <div class="cr-l"><img src="img/fatherCh.png" alt=""/></div>
  <div class="cr-icon">
   <div id="cr-icon">
    <img style="left:5%" src="img/gift2.png" alt=""/>
    <img style="left:25%" src="img/gift2.png" alt=""/>
    <img style="left:45%" src="img/gift2.png" alt=""/>
    <img style="left:65%" src="img/gift2.png" alt=""/>
    <img style="left:85%" src="img/gift2.png" alt=""/>
   </div>
  </div>
  <div class="cr-r"><img src="img/family.png" alt=""/></div>
 </div>

样式

在css中用到了:first 和 :last 属性,这两个属性是动态的,如果文档的结构变了,这两个属性的值也会相应的改变,这样我们就不必再麻烦的判断哪个元素是最后一个元素(第一个元素),直接用这两个属性就会自动选择第一个元素和最后一个元素

html, body {
   height: 100%;
   margin: 0;
   padding: 0;
      }
  .cr{
   width: 100%;
   position: relative;
   background: url("../img/bg.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;
  }

 jQuery代码

在源码中,作者将这个五个礼物的初始位置写在了HTML结构中,我觉得不太好就在jQuery的代码中实现了,代码没有什么难的,就是对思路的实现

$(function() {
  // 点击礼物图片,切换图片
  $('#cr-icon img').click(function(){
   if($(this).attr('src') == 'img/gift2.png'){
    $(this).attr('src','img/gift.png');
   }else{
    $(this).attr('src','img/gift2.png');
   }
  });
  var timer = null;
  var oImg = $('#cr-icon img');
  var end = document.body.clientWidth;
  var height = document.body.scrollHeight;
  // 设置高
  $(".cr").css("height",height);
  // 设置图片的初始位置
  for(var i=0;i<oImg.length;i++){
   $(oImg[i]).css('left', 5+i*20+'%');
  }
  // 图片轮换函数
  function scrollLogo(){
   oImg.each(function(){
    var left = parseInt($(this).css('left'));
    left += end * 0.2;
    $(this).css('left',left);
   });
   $('#cr-icon img:last').insertBefore('#cr-icon img:first').css('left',end * 0.05);
  }
  scrollLogo();
  // 定时器,开始轮换
  timer = setInterval(scrollLogo,1800);
  // 鼠标移入清楚轮换
  oImg.mouseover(function(){
   clearInterval(timer);
  });
  // 鼠标移出开始轮换
  oImg.mouseleave(function() {
   timer = setInterval(scrollLogo,1800);
  });
 });

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

Javascript 相关文章推荐
js模拟select下拉菜单控件的代码
May 08 Javascript
javascript判断office版本示例
Apr 11 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 #Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 #Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 #Javascript
JavaScript中数据类型转换总结
Dec 25 #Javascript
javascript实现用户点击数量统计
Dec 25 #Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 #Javascript
js实现图片切换(动画版)
Dec 25 #Javascript
You might like
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
mailto的使用技巧分享
2012/12/21 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
教你安装python Django(图文)
2013/11/04 Python
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
python查看列的唯一值方法
2018/07/17 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
python常量折叠基础知识点讲解
2021/02/28 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
情人节寄语大全
2014/04/11 职场文书
归元寺导游词
2015/02/06 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
五年级作文之学校的四季
2019/12/05 职场文书