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 相关文章推荐
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
vue实现跨域的方法分析
May 21 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 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
解析wamp5下虚拟机配置文档
2013/06/27 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python实现带百分比的进度条
2016/06/28 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
使用requests库制作Python爬虫
2018/03/25 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
教师实习的自我鉴定
2013/10/26 职场文书
大学生活学习的自我评价
2013/12/03 职场文书
大学生求职信范文
2014/05/24 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
检举信的写法
2019/04/10 职场文书