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数组组合成字符串的脚本
Jan 06 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 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
php学习笔记之 函数声明(二)
2011/06/09 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
javascript 播放器 控制
2007/01/22 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python for 循环获取index索引的方法
2019/02/01 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
python能自学吗
2020/06/18 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
会计应届生的自荐信
2013/12/13 职场文书
《去年的树》教学反思
2014/04/11 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
学生检讨书范文
2014/10/30 职场文书