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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
PHP生成静态页
2006/11/25 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
公交公司毕业生求职信
2014/02/15 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
道士塔读书笔记
2015/06/30 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
JavaScript实现简单计时器
2021/06/22 Javascript