jQuery实现图像旋转动画效果
更新时间：2016年05月29日 15:06:02 投稿：mrr
jquery动画旋转效果在项目中经常遇到这样的需求，下面小编给大家分享具体实现代码，感兴趣的朋友一起学习吧
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!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实现图像旋转动画效果，希望对大家有所帮助！
您可能感兴趣的文章:
相关文章
下面小编就为大家带来一篇浅谈jQuery中ajaxPrefilter的应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery.2010-10-10
jQuery图片滚动图片的效果(另类实现)，需要的朋友可以参考一下2013-06-06
这篇文章主要介绍了jQuery插件imgPreviewQs实现上传图片预览的相关资料,需要的朋友可以参考下2016-01-01
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
在上两篇文章中，我们看到每次要通过 jQuery 的原型增加共享方法的时候，都需要通过 jQuery.fn 一个个进行扩展，非常麻烦.2010-08-08
jQuery validate插件实现ajax验证重复的2种方法
这篇文章主要介绍了jQuery validate插件实现ajax验证重复的2种方法,结合完整实例形式分析了jQuery validate插件的使用技巧,需要的朋友可以参考下2016-01-01
本篇文章只要是对jquery ajax跨域解决方法(json方式)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了基于jquery实现表格无刷新分页，功能实现了前端排序功能，增加了前端搜索功能，感兴趣的小伙伴们可以参考一下2016-01-01
前些阵子写了个插件目的就是能够像.net 的 Requst.QuerySting["param"]那样获取地址栏参数。现在拿出来和大家分享。感觉这个插件还是蛮有用的。2010-10-10
碰到没有固定高或者固定宽或者固定高和宽的时候，我们就需要用JS去处理，去动态获取当前窗口高或者宽；今天弄了2种情况，一个是相对于屏幕窗体，一个是相对于当前的窗口，看代码2013-04-04
最新评论