<!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 实现图像旋转动画效果是网页动态效果中的常见需求，它能为用户体验增添趣味性和互动性。在本篇文章中，我们将探讨如何使用 jQuery 来创建图像旋转动画，并通过具体的代码示例来理解其工作原理。 首先，确保...
3. **动画**：jQuery的`.animate()`方法可以用于创建平滑的动画效果，结合CSS3转换，我们可以实现卡片的平滑旋转和进出。 4. **事件处理**：jQuery的`.on()`方法用于绑定事件监听器，例如点击事件，当用户点击下...
本文将深入探讨如何使用jQuery来实现图片旋转功能，并兼容IE、Firefox、Opera和Chrome等主流浏览器。 首先，要实现图片旋转，我们需要理解CSS3中的`transform`属性，尤其是`rotate()`函数。`rotate()`允许我们以...
3. JavaScript文件：主要的jQuery代码，实现轮播功能，包括图片的切换逻辑、3D旋转动画等。 4. 图片文件：实际展示的轮播图片。 5. 可能还包含其他辅助文件，如图标、JSON配置文件或README文档，提供关于如何使用和...
本文将深入探讨如何使用jQuery实现360度图像旋转效果，这是一种常见于产品展示、虚拟现实或互动设计中的技术。 首先，要实现360度旋转，我们需要准备一系列连续拍摄的产品图片，这些图片通常是围绕产品中心360度...
5. **动画实现**：在点击事件处理函数中，通过修改CSS3的`transform`属性值，实现3D旋转。可以使用`transition`属性控制旋转的平滑过渡效果，以及`transform-style: preserve-3d;`保持3D空间中的子元素。 6. **控制...
elbeanio-jquery.tagsphere还支持自定义事件，比如在旋转开始、结束或者达到特定角度时触发回调函数，这为开发者提供了更多可能性，可以结合其他功能如动画、数据交互等进行更复杂的场景构建。 总结来说，elbeanio-...
具体实现可能涉及到CSS3的transform属性，例如translateX和rotate，结合jQuery的动画函数，精确控制每个切片的移动和旋转，以形成连续而富有动态感的过渡。 左右箭头是用户导航的重要组成部分，它们允许用户手动...
下面将详细阐述如何使用这些技术来创建动态的、视觉吸引人的图像旋转效果。 首先，`index.html` 是主网页文件，它包含了页面的基本结构和引用外部资源的链接。在 HTML 中，通常会有一个 `<div>` 元素用于包裹要旋转...
为了实现平滑的过渡效果，jQuery提供了animate方法，可以创建自定义的动画效果，包括3D旋转。结合CSS3的transition属性，可以实现流畅的动画过渡，提高用户体验。 在实际开发中，还需要考虑浏览器兼容性问题，因为...
本示例中的“jQuery按钮控制叠加图片旋转木马切换代码”是一个利用jQuery实现的交互式图片展示功能，常用于产品展示或者图像滑动效果。下面我们将深入探讨这一技术的核心知识点： 1. **jQuery库**：jQuery是...
这个特效的核心在于jQuery的动画功能，它通过修改CSS属性（如transform和transition）来实现元素的旋转效果。在CSS中，`transform`属性允许我们对元素进行旋转、缩放、移动等变换，而`transition`属性则定义了这些...
在本文中，我们将深入探讨如何使用jQuery和CSS3来创建一个具有旋转动画效果的轮播幻灯片特效。这个特效可以为网站增添动态视觉吸引力，提高用户体验，尤其适用于产品展示或图片滑动导航。 首先，jQuery是一个强大的...
Reel 是现今建立的功能最全的 jQuery 图像 360 度旋转插件。它利用新的技术使普通的图像标记变成一个全方位 360 度交互的对象电影，全景或者定格动画。在线演示 标签：jQuery
- JavaScript文件（可能包括jQuery库）：实现抽奖逻辑，包括点击事件处理、动画效果、随机数生成和概率控制。 - 图片资源：可能包括转盘的背景图、奖品图标等。 综上所述，实现一个jQuery转盘抽奖功能需要结合HTML...
在3D图像查看器中，jQuery可以帮助我们更便捷地响应用户的交互，如点击、拖动等，并实现平滑的图像旋转或缩放动画。 要实现3D立体图像查看，我们需要理解以下几个关键概念： 1. **CSS3 3D变换**：CSS3提供了...
在本文中，我们将深入探讨如何使用jQuery实现头像的左右动画旋转以及支持裁剪功能。jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果和Ajax交互等任务。对于创建动态和交互式的网页...
本文将深入探讨"jQuery 3D立体图像查看"这一主题，这通常指的是利用jQuery来实现一种增强用户体验的3D图像展示技术。 首先，我们需要理解3D图像查看的基本原理。在网页中，3D效果通常是通过CSS3的transform属性或者...