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 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
关于文本限制字数的js代码
Apr 02 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
详解jQuery中的easyui
Sep 02 jQuery
node和vue实现商城用户地址模块
Dec 05 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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语法(1)
2006/10/09 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
img的onload的另类用法
2008/01/10 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
使用graphics.py实现2048小游戏
2015/03/10 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Python实现k-means算法
2018/02/23 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
超市营业员岗位职责
2013/12/20 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
JS setTimeout与setInterval的区别
2022/04/20 Javascript