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 相关文章推荐
菜单效果
Oct 14 Javascript
javascript打开word文档的方法
Apr 16 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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微信支付之APP支付方法
2015/03/04 PHP
PHP代码优化技巧小结
2015/09/29 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
JavaScript 异步调用
2017/10/25 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python用match()函数爬数据方法详解
2019/07/23 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
竞争性谈判邀请书
2014/02/06 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
高中教师个人工作总结
2015/02/10 职场文书
中秋节寄语2015
2015/03/24 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript