jQuery实现图像旋转动画效果

2024-10-09 10:38:15

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!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中使用show()与hide()方法动画显示和隐藏图片

(1)功能描述在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以动画的方式隐藏该图片. (2)实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
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> <meta http-equiv="Content-
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】

本文实例讲述了jQuery+HTML5实现WebGL高性能烟花绽放动画效果.分享给大家供大家参考,具体如下: 运行效果: 完整代码如下: <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websocket
CSS+jQuery实现的一个放大缩小动画效果

今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. 都是定死了的.因为需求就只有4个元素.如果是要用CSS的class来处理,那就需要用到CSS3动画了. 复制代码代码如下: <!DOCTYPE html> <html> <head> <title> CSS+jQuery动画效果 </title> <meta name="Generator" content="EditPlus
基于Jquery和html5实现炫酷的3D焦点图动画

这款HTML5焦点图不仅可以手动点击按钮切换图片,而且还支持自动切换图片,使用起来也相当方便.如果你需要在网站中展示产品图片,那么这款焦点图插件非常适合你. 在线演示源码下载 HTML代码 <section id="dg-container" class="dg-container"> <div class="dg-wrapper"> <a href="#"><img src=&quo
jQuery下的动画处理总结

queue()/ dequeue()这两个方法就像Ajax的XMLHttpRequest对象一样的隐蔽,不为常人所知.这两个方法在动画处理的时候很有用,我们经常会写一些这样的代码复制代码代码如下: $('#test').animate({ "width": "300px", "height": "300px", "opacity":&qu
jQuery结合HTML5制作的爱心树表白动画

HTML代码如下: 复制代码代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <title>程序员用HTML5制作的爱心树表白动画- 柯乐义</title><base target="_blank" href="http
jQuery实现加入购物车飞入动画效果

HTML 首先载入jQuery库文件和jquery.fly.min.js插件. 复制代码代码如下: <script src="jquery.js"></script> <script src="jquery.fly.min.js"></script> 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片.价格.名称以及加入购物车按钮等信息. 复制代码代码如下: <
基于jquery的direction图片渐变动画效果

还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在firefox下不能识别看不到效果, 下面就开始我们的代码编写吧 html是比较简单的代码复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <TITLE>myjquerydirection</TITLE> <META http-equiv
jquery+html5烂漫爱心表白动画代码分享

本文实例讲述了jquery+html5烂漫爱心表白动画代码.分享给大家供大家参考.具体如下: jquery+html5烂漫爱心表白动画是一款jquery html5 canvas电子版的烂漫爱心表白动画,效果相当不错,非常有创意,很适合进行表白. 运行效果图:----------------------查看效果下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery+html5烂漫爱心表白动画代码如下 <!DOC

jQuery实现图像旋转动画效果

相关推荐

随机推荐