jQuery实现圣诞节礼物传送(花式轮播)


Posted in Javascript onDecember 25, 2016

大致介绍

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

原地址:花式轮播----圣诞礼物传送

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

基本结构

代码:

<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);
 });
 });

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
关于Javascript闭包与应用的详解
Apr 22 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 #Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 #Javascript
web 屏蔽BackSpace键实例代码
Dec 24 #Javascript
js实现的xml对象转json功能示例
Dec 24 #Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 #Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 #Javascript
纯JS实现表单验证实例
Dec 24 #Javascript
You might like
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
python数据结构之链表的实例讲解
2017/07/25 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python爬虫与反爬虫大战
2020/07/30 Python
python Paramiko使用示例
2020/09/21 Python
python 5个实用的技巧
2020/09/27 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
教师演讲稿范文
2014/01/08 职场文书
水电工岗位职责
2014/02/12 职场文书
开工仪式主持词
2014/03/20 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
python blinker 信号库
2022/05/04 Python