今天头要做一个中间一个大图片，然后外层围一圈小图片，鼠标移动到外层的小图片时就变大，移开就还原的效果，呵呵，本来想找一个插件的，可是找了半天，没有找到合适的插件，就自己动手实现了一下，发现原来如此简单，就是hover,stop,animate三个方法的综合应用及图片的定位就行了，以下为原代码：
<!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> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
body{
font-family: "Courier New";
font-size : 14px;
background-attachment: fixed;
background-image:url("images/background.png");
background-repeat:no-repeat;
background-position: right bottom;
}
img{
position : absolute;
}
.outImg{
width : 48px;
height : 48px;
}
.centerImg{
width : 300px;
height : 200px;
}
div{
width : 200px;
height : auto;
}
div ul li {
list-style-type : decimal;
}
div ul li a:link, div ul li a:visited {
color: #0066cc;
text-decoration: none;
}
div ul li a:hover {
color: #6699ff;
text-decoration: underline;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
//内层图片的中间定位
//首先获取文档的宽高
var bodyWidth = $(document).width();
var bodyHeight = $(document).height();
//算中心点
var cWidth = 300;
var cHeight = 200;
var cLeft = bodyWidth/2 - cWidth/2 - 100;
var cTop = bodyHeight/2 - cHeight/2;
//alert(cLeft + "," + cTop);
//中间图片的定位
$("#cImg").css({"margin-top":cTop, "margin-left":cLeft});
//外层图片的定位
var inWidth = 96; //鼠标移上来时宽
var inHeight = 96; //鼠标移上来时高
var outWidth = 48; //鼠标移出去时宽
var outHeight = 48; //鼠标移出去时高
var interval = 100; //外层图片与中间图片的间隔
//上
$("#oImg1").css({"margin-top":cTop - interval - outHeight/2, "margin-left":cLeft + cWidth/2 - outWidth/2});
//下
$("#oImg2").css({"margin-top":cTop + cHeight + interval - outHeight/2, "margin-left":cLeft + cWidth/2 - outWidth/2});
//左1
$("#oImg3").css({"margin-top":cTop, "margin-left":cLeft - interval - outHeight/2});
//左2
$("#oImg4").css({"margin-top":cTop + cHeight - outHeight, "margin-left":cLeft - interval - outHeight/2});
//右1
$("#oImg5").css({"margin-top":cTop, "margin-left": cLeft + cWidth + interval});
//右2
$("#oImg6").css({"margin-top":cTop + cHeight - outHeight, "margin-left": cLeft + cWidth + interval});
//外层图片动画效果的实现
$(".outImg").hover(
function () {
$(this).stop(true, true).animate({
width: '+=48',
height: '+=48',
marginTop : "-=24",
marginLeft : "-=24"
});
},
function () {
$(this).stop(true, true).animate({
width: '-=48',
height: '-=48',
marginTop : "+=24",
marginLeft : "+=24"
});
}
);
});
</script>
</head>
<body>
<img src="images/Penguins.jpg" id="cImg" class="centerImg"/>
<img src="images/1.png" class="outImg" id="oImg1"/>
<img src="images/2.png" class="outImg" id="oImg2"/>
<img src="images/3.png" class="outImg" id="oImg3"/>
<img src="images/4.png" class="outImg" id="oImg4"/>
<img src="images/5.png" class="outImg" id="oImg5"/>
<img src="images/6.png" class="outImg" id="oImg6"/>
<div style="float:right; margin-top:20px">
<div><h4>待办事项</h4></div>
<div>
[list]
[*][url=#]待办事项1[/url]
[*][url=#]待办事项2[/url]
[*][url=#]待办事项3[/url]
[*][url=#]待办事项4[/url]
[*][url=#]待办事项5[/url]
[/list]
</div>
<div><h4>已办事项</h4></div>
<div>
[list]
[*][url=#]已办事项1[/url]
[*][url=#]已办事项2[/url]
[*][url=#]已办事项3[/url]
[*][url=#]已办事项4[/url]
[*][url=#]已办事项5[/url]
[/list]
</div>
</div>
</body>
</html>
呵呵，就是这么简单
分享到：
相关推荐
本文将介绍如何使用原生JavaScript实现类似jQuery中的animate()方法的动画效果。在前端开发中，jQuery提供了一套非常方便的API来实现动画效果，但随着Web标准的发展和性能优化需求的提高，原生JavaScript的方法逐渐...
3. **使用方法**：在网页中引入jQuery库和AnimateNumber插件后，可以使用简单的jQuery选择器和方法来应用动画效果。例如，`$("#yourElement").animateNumber({number: yourTargetNumber}, duration, options);` 这行...
《jQuery Animate分页按钮详解及其应用》 在网页开发中，用户界面的交互性是提升用户体验的关键因素之一。jQuery Animate分页按钮是一种巧妙的交互设计，它通过动画效果增强了分页功能的视觉吸引力，使得用户在浏览...
在本主题中，我们将深入探讨"jQuery animate滑动收缩展开时间轴大事记发展历程"，了解这一功能如何随着时间推移而发展，并在实际项目中应用。 jQuery的animate()函数是其强大的动画工具之一，它允许开发者创建...
在这个示例中，“jquery animate图片模向滑动示例”正是利用了 `jQuery` 的 `animate` 方法来实现图片在水平方向上的滑动切换，为用户提供一种优雅的方式来浏览大量图片。 首先，`jQuery Animate` 是 `jQuery` 库中...
jquery animate图片模向滑动示例，适用于展示图片太多的页面，通过点击左右方向按钮，滑动展示更多的图片。功能简单，在IE、Firefox、谷歌浏览器 通过测试。详细示例图片。jquery animate() 用于创建自定义动画的...
3. **jQuery animate()**：通过调用`animate()`方法，改变图片容器的left或transform属性，使其在一定时间内平滑移动，从而实现图片的滑动效果。在每次动画结束时，调整图片顺序，让下一张图片移到前面，形成无缝...
`jQuery Animate`方法允许我们自定义动画的各个属性，包括位置、大小、颜色等。基本语法如下： ```javascript $(selector).animate({ property1: value1, property2: value2, ... }, duration, easing, callback...
总之，"jquery animate网站banner动画效果.zip"是一个实用的学习资源，它演示了如何利用jQuery的animate方法和CSS3的animate属性协同工作，创建出富有创意的网站横幅动画。无论是初学者还是经验丰富的开发者，都能...
在这个"免费jquery animate小用例"中，我们将深入探讨`animate()`的使用方法及其背后的原理。 `animate()`函数允许开发者自定义元素的各种CSS属性（如宽度、高度、位置等）的变化过程，从而实现丰富的动态效果。...
《jQuery animateNumber插件详解与应用》 在Web开发中，动态效果的运用极大地提升了用户体验，数字动画就是其中一种常见的视觉表现形式。今天我们将聚焦于一个名为“jquery-animateNumber”的插件，它允许开发者...
接着，可以通过jQuery选择器选取要应用动画的元素，并调用`.animate3d()`方法来初始化插件。此方法允许设置各种参数，如动画速度、3D旋转的角度以及是否启用硬件加速。 例如： ```html <!DOCTYPE html> ...
在本文中，我们将深入探讨如何使用jQuery的animate函数来实现一个简单的图片放大效果。...在实际应用中，可以根据需求调整动画速度、添加过渡效果，或者与其他jQuery方法结合使用，创造出更复杂的交互设计。
在"jquery animate图片模向滑动.rar"这个项目中，我们主要关注的是如何利用animate()方法来控制图片的左右滑动。具体步骤如下： 1. **HTML结构**：创建一个包含所有图片的容器，并将每张图片设置为相同的宽度，但...
在本主题中，我们将深入探讨如何利用jQuery的animate方法实现一种卷轴打开的动画效果。这个效果通常用于模拟书籍翻页、画卷展开等场景，为用户界面增添动态视觉魅力。 首先，了解jQuery的核心功能之一——动画。...
在本文中，我们将深入探讨如何使用jQuery的animate()方法实现图片的横向滑动效果。`jQuery` 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。`animate()`函数是jQuery中用于创建自定义动画的...
本篇文章将深入探讨jQuery中的`animate()`方法，这是一个强大的功能，用于创建平滑的自定义动画效果。 `animate()`方法是jQuery库中一个核心的函数，允许开发者创建复杂的动画序列。它通过改变CSS属性值，如宽度、...
**jQuery的animate()方法详解** 在前端开发中，jQuery库为我们提供了一种强大的方式来实现元素的平滑动画效果，其中`animate()`方法是动画功能的核心。本篇文章将深入探讨如何使用`animate()`来使`div`或其他HTML...