<!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 divLength = 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动画旋转效果在项目中经常遇到这样的需求,下面小编给大家分享具体实现代码,感兴趣的朋友一起学习吧
Reel 是现今建立的功能最全的 jQuery 图像 360 度旋转插件。它利用新的技术使普通的图像标记变成一个全方位 360 度交互的对象电影,全景或者定格动画。在线演示 标签:jQuery
jQuery实现图片3D旋转特效插件 v1.1版本下载 jQuery实现图片3D立体感的前后轮番展示特效 jQuery实现图片取景器仿相机拍照功能的插件photoShoot jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 jquery实现...
26. jQuery实现图片3D旋转特效插件 v1.1版本下载 27. jQuery实现图片3D立体感的前后轮番展示特效 28. jQuery实现图片取景器仿相机拍照功能的插件photoShoot 29. jQuery实现图片变色特效插件与实例下载如jquery...
26. jQuery实现图片3D旋转特效插件 v1.1版本下载 27. jQuery实现图片3D立体感的前后轮番展示特效 28. jQuery实现图片取景器仿相机拍照功能的插件photoShoot 29. jQuery实现图片变色特效插件与实例下载如jquery...
jQuery 图像旋转插件可以让用户从各种角度进行 360 度的图像展示,经常在电子商务网站上使用,帮助消费者更好的了解产品,从任意的一个角度观察欣赏。 在这篇文章中,我们收集了 13 款最佳的 jQuery 图像 360 度...
26. jQuery实现图片3D旋转特效插件 v1.1版本下载 27. jQuery实现图片3D立体感的前后轮番展示特效 28. jQuery实现图片取景器仿相机拍照功能的插件photoShoot 29. jQuery实现图片变色特效插件与实例下载如jquery...
9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑...
26. jQuery实现图片3D旋转特效插件 v1.1版本下载 27. jQuery实现图片3D立体感的前后轮番展示特效 28. jQuery实现图片取景器仿相机拍照功能的插件photoShoot 29. jQuery实现图片变色特效插件与实例下载如jquery...
《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何使用jQuery的各项技术,实现令人激动的网页效果。 《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的...
在下拉页面的时候,有一种立体感觉,像是从齿轮内部向外看旋转的感觉。 底部图像从四周合围,带有问题提示说明效果
一款带有磁性的jquery鼠标响应式眼睛旋转特效,只需要轻轻移动下鼠标,眼睛也会跟着移动。
jQuery叠加图片切换,旋转木马图片效果。
这个特效是有一个旋转缩略图,一旦点击这个缩略图,就会出现动画,展示选定图片的大图效果。 您可以使用向前和向后的按钮浏览所有图片集中大图的图像,当点击大图片会变得分散型缩略图再次进入图片集。
Sortable:ui 助手、数组操作、类操作 Droppable:可接受的项目、类操作、动画 我一直在广泛研究图像管理应用程序。 我一直在使用 jQuery 和 jQuery UI 来处理图像的拖动。 我把这个脚本放在一起来展示创建这样一个...
元素旋转器一个简单,轻巧的jQuery插件,用于旋转图像,文本或其他元素。 那里有很多rotator插件,其中有很多非常大的选项。 我使用此功能的目标是编写简短而甜美的代码,只有两个选择。 此功能的过渡效果是具有可选...
这个模块基于 iView jQuery 图像滑块,带有动画字幕,很棒的布局。 轻松添加无限数量的幻灯片和标题。 您可以将其用作图像滑块、图片库、横幅旋转器、横幅广告,甚至演示文稿。 该模块使用不显眼的 javascript 将...