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 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 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
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
前端性能优化及技巧
2016/05/06 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 类的继承实例详解
2017/03/25 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
python学习笔记之多进程
2020/08/06 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
如何编写python的daemon程序
2021/01/07 Python
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
Python如何定义一个函数
2015/09/01 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
大学军训感言600字
2014/02/25 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
2015年教研员工作总结
2015/05/26 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
使用Python拟合函数曲线
2022/04/14 Python