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设计模式 接口介绍
Jul 24 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 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 地区分类排序算法
2013/07/01 PHP
php操作xml
2013/10/27 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
js Flash插入函数免激活代码
2009/03/31 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
Python中字符编码简介、方法及使用建议
2015/01/08 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
Python运行DLL文件的方法
2020/01/17 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
市场营销大学生职业规划书
2014/02/25 职场文书
2014庆六一活动方案
2014/03/02 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
自我管理的活动方案
2014/08/25 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技