jQuery实现图像旋转动画效果


Posted in Javascript onMay 29, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery Animation - fadeTo </title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("div[name='divPop']").bind("click",clickMove).bind("dblclick",forward); 
}) 
function clickMove(){ 
var left = $(this).css("left"); 
if(left == "350px"){ 
loginMove("right",2); 
} 
else if(left == "150px"){ 
loginMove("right",1); 
} 
else if(left == "455px"){ 
loginMove("right",3); 
} 
else if(left == "650px"){ 
loginMove("left",1); 
} 
else if(left == "530px"){ 
loginMove("left",2); 
} 
else{ 
var cla = $(this).attr("class"); 
switch (cla) { 
case "login_1": forward("http://www.baidu.com/");break; 
case "login_2": forward("http://www.google.cn/");break; 
case "login_3": forward("http://www.163.com/");break; 
case "login_4": forward("http://www.sina.com.cn/");break; 
case "login_5": forward("http://www.sohu.com/");break; 
case "login_6": forward("http://www.qq.com/");break; 
default: forward('#'); 
} 
} 
} 
function loginMove(direction,index){ //动画函数 
var timerId; 
if(index<=0){ 
clearInterval(timerId); //取消动画功能 
return; 
} 
var div = $("[name='divPop']"); //取得所有div 
var divdivLength = div.length; 
if(direction=="left"){ 
div[-1] = div[divLength-1] 
var n=-2; 
} 
else{ 
div[divLength] = div[0]; 
var n = 0; 
} 
div.each(function(){ //jquery封装的动画功能 
++n; 
$(this).animate( 
{ 
"top":$(div[n]).css("top"), //取得下一个目标位置div的参数 
"left":$(div[n]).css("left"), 
"width":$(div[n]).width(), 
"height":$(div[n]).height() 
}, 
600, 
function(){ 
if($(this).css("top")=='150px'){ 
$(this).css({zIndex:3}); //设置图层置顶 
} 
else if ($(this).css("top")=='170px'){ 
$(this).css({zIndex:2}); 
} 
else if ($(this).css("top")=='80px'){ 
$(this).css({zIndex:1}); 
} 
else { 
$(this).css({zIndex:0}); 
} 
} 
); 
}) 
timerId = setInterval(function(){ 
loginMove(direction,--index); 
},650); 
} 
function forward(url){ 
window.location.href = url; 
} 
</script> 
</head> 
<body> 
<div name="divPop" class="login_1" style="background-color:#f0f0f0;border:solid 1px ;cursor:pointer; width:355px; height:343px; position:absolute; left:330px; top:150px; z-index:3; filter:alpha(opacity=90);"> 
<div style="text-align:center;">百度</div> 
</div> 
<div name="divPop" class="login_2" style="background-color:blue;border:solid 1px;cursor:pointer; width:220px; height:230px; position:absolute; left:650px; top:170px; z-index:2; filter:alpha(opacity=90);"> 
<div style="text-align:center;">Google</div> 
</div> 
<div name="divPop" class="login_3" style="background-color:yellow;border:solid 1px;cursor:pointer; width:136px; height:130px; position:absolute; left:530px; top:80px; z-index:1; filter:alpha(opacity=90); "> 
<div style="text-align:center;">网易</div> 
</div> 
<div name="divPop" class="login_4" style="background-color:red;border:solid 1px;cursor:pointer; width:105px; height:100px; position:absolute; left:455px; top:50px; z-index:0; filter:alpha(opacity=90); "> 
<div style="text-align:center;">新浪</div> 
</div> 
<div name="divPop" class="login_5" style="background-color:#00ff00;border:solid 1px;cursor:pointer; width:136px; height:130px; position:absolute; left:350px; top:80px; z-index:1; filter:alpha(opacity=90); "> 
<div style="text-align:center;font:write">阿里巴巴</div> 
</div> 
<div name="divPop" class="login_6" style="background-color:green;border:solid 1px;cursor:pointer; width:220px; height:230px; position:absolute; left:150px; top:170px; z-index:2; filter:alpha(opacity=90); "> 
<div style="text-align:center;font:write">腾讯</div> 
</div> 
</body> 
</html>

以上所述是小编给大家介绍的jQuery实现图像旋转动画效果,希望对大家有所帮助!

Javascript 相关文章推荐
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
js+css3制作时钟特效
Oct 16 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
ES6基础之默认参数值
Feb 21 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
jQuery中使用animate自定义动画的方法
May 29 #Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 #Javascript
js剪切板应用clipboardData实例解析
May 29 #Javascript
js实现可控制左右方向的无缝滚动效果
May 29 #Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 #Javascript
js省市县三级联动效果实例
Apr 15 #Javascript
js实现精确到秒的倒计时效果
May 29 #Javascript
You might like
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
PHP与SQL注入攻击[三]
2007/04/17 PHP
php 数组的一个悲剧?
2011/05/11 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
php提取微信账单的有效信息
2018/10/01 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
javascript 常用关键字列表集合
2007/12/04 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
python编写俄罗斯方块
2020/03/13 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
团员的自我评价
2013/12/01 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
学校工会工作总结2015
2015/05/19 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA