jquery实现图像旋转动画

最新推荐文章于 2020-12-22 03:29:56 发布

原创最新推荐文章于 2020-12-22 03:29:56 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #百度 #腾讯 #JavaScript #ViewUI

j2ee 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的动画案例，通过动态调整多个div元素的位置、大小及透明度来模拟轮播效果，并为每个div设置了点击跳转到不同网站的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文转载自：http://mengqingyu.iteye.com/blog/468414

附带实例下载

Js代码

<!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">
var timerId;
$(document).ready(function(){
timerId = setInterval(function(){ //页面加载时调用定时器运行动画
testMove("left");
},6000);
$(".login_1").bind("click",function(){ //绑定百度图片点击事件
forward("http://www.baidu.com/");
})
})
function testMove(direction){ //动画函数
$("#left").hide(); //运行时隐藏按钮
$("#right").hide();
clearInterval(timerId); //取消动画功能
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封装的动画功能
$(this).animate(
{
"top":$(div[++n]).position().top, //取得下一个目标位置div的参数
"left":$(div[n]).position().left,
"width":$(div[n]).width(),
"height":$(div[n]).height(),
"opacity":$(div[n]).css("opacity")
},
500,
function(){
if($(this).position().top==150){
$(this).css({zIndex:3}); //设置图层置顶
$(this).css({cursor:"pointer"});
$(this).bind("click",function(){
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('#');
}
})
}
else if ($(this).position().top==170){
$(this).css({zIndex:2});
$(this).css({cursor:"default"});
$(this).unbind("click"); //当图片不在中间时取消点击事件
}
else if ($(this).position().top==80){
$(this).css({zIndex:1});
$(this).css({cursor:"default"});
$(this).unbind("click");
}
else {
$(this).css({zIndex:0});
$(this).css({cursor:"default"});
$(this).unbind("click");
}
$("#left").show();
$("#right").show();
}
);
})
timerId = setInterval(function(){
testMove("left");
},6000);
}
function forward(url){
window.location.href = url;
}
</script>
</head>
<body>
<div name="divPop" class="login_1" style="background-color:#f0f0f0;border:solid 1px #000000;cursor:pointer; width:355px; height:343px; overflow:hidden; position:absolute; left:330px; top:150px; z-index:3; filter:alpha(opacity=100); opacity:1; -ms-interpolation-mode:bicubic;">
<div style="text-align:center;">百度</div>
</div>
<div name="divPop" class="login_2" style="background-color:blue;border:solid 1px #000000;width:220px; height:230px; overflow:hidden; position:absolute; left:650px; top:170px; z-index:2; filter:alpha(opacity=70); opacity:0.7; -ms-interpolation-mode:bicubic;">
<div style="text-align:center;">Google</div>
</div>
<div name="divPop" class="login_3" style="background-color:yellow;border:solid 1px #000000;width:136px; height:130px; overflow:hidden; position:absolute; left:530px; top:80px; z-index:1; filter:alpha(opacity=70); opacity:0.7; -ms-interpolation-mode:bicubic;">
<div style="text-align:center;">网易</div>
</div>
<div name="divPop" class="login_4" style="background-color:red;border:solid 1px #000000;width:105px; height:100px; overflow:hidden; position:absolute; left:455px; top:50px; z-index:0; filter:alpha(opacity=70); opacity:0.7; -ms-interpolation-mode:bicubic;">
<div style="text-align:center;">新浪</div>
</div>
<div name="divPop" class="login_5" style="background-color:black;border:solid 1px #000000;width:136px; height:130px; overflow:hidden; position:absolute; left:350px; top:80px; z-index:1; filter:alpha(opacity=70); opacity:0.7; -ms-interpolation-mode:bicubic;">
<div style="text-align:center;font:write">搜狐</div>
</div>
<div name="divPop" class="login_6" style="background-color:green;border:solid 1px #000000;width:220px; height:230px; overflow:hidden; position:absolute; left:150px; top:170px; z-index:2; filter:alpha(opacity=70); opacity:0.7; -ms-interpolation-mode:bicubic;">
<div style="text-align:center;font:write">腾讯</div>
</div>
<div style="position:absolute;left:450px;top:550px">
<input id="left" type="button" value="向左" onClick="testMove('right')"/>
<input id="right" type="button" value="向右" onClick="testMove('left')"/>
</div>
</body>
</html>