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 相关文章推荐
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
第一篇初识bootstrap
Jun 21 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery插件实现图片轮播效果
Oct 19 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去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
js实现日历的简单算法
2017/01/24 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
python 队列详解及实例代码
2016/10/18 Python
Python处理CSV与List的转换方法
2018/04/19 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
经典c++面试题五
2014/12/17 面试题
《桃花心木》教学反思
2014/02/17 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
追悼会答谢词范文
2015/09/29 职场文书
在Django中使用MQTT的方法
2021/05/10 Python