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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
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中函数内引用全局变量的方法
2008/10/20 PHP
PHP 时间日期操作实战
2011/08/26 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
php与js的区别是什么
2013/08/05 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
python使用mysql数据库示例代码
2017/05/21 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python计算导数并绘图的实例
2020/02/29 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
python爬虫容易学吗
2020/06/02 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
Ejb技术面试题
2015/04/29 面试题
房地产管理毕业生自荐信
2013/11/04 职场文书
机关作风建设自查报告
2014/10/22 职场文书
土地租赁协议书
2015/01/29 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL