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 相关文章推荐
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
面包屑导航详解
Dec 07 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
JS实现时间校验的代码
May 25 Javascript
JavaScript实现滑块验证解锁
Jan 07 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获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
Python的面向对象编程方式学习笔记
2016/07/12 Python
详解django2中关于时间处理策略
2019/03/06 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
程序员跳槽必看面试题总结
2013/06/28 面试题
教师求职推荐信范文
2013/11/20 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
小学防溺水制度
2014/01/29 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
2019秋季运动会口号
2019/06/25 职场文书