jquery动画 -- 6.制作带鼠标和键盘引导功能的图片浏览器

　　今天我们要介绍的jquery动画效果是，当移动鼠标或者按键盘的左右键时，图片走廊中的图片向相应方向转动。

　　先来看张效果图，教程最后附有demo，大家可以下载。



　　首先要做的工作是创建html文本。

<div id="proximity">
<img src="img/proximity1.jpg" alt="CH-47 Chinook" />
<img src="img/proximity2.jpg" alt="Mi-24W" />
<img src="img/proximity3.jpg" alt="Mil Mi-24A" />
<img src="img/proximity4.jpg" alt="AH-1J Cobra" />
<img src="img/proximity5.jpg" alt="Mi-24P" />
<img src="img/proximity6.jpg" alt="AH-1Z Viper" />
<img src="img/proximity7.jpg" alt="AH-1W Cobra" />
<img src="img/proximity8.jpg" alt="UH-1Y Huey" />
<img src="img/proximity9.jpg" alt="AH-64 Apache" />
<img src="img/proximity10.jpg" alt="AH-1W Super Cobra" />
<img src="img/proximity11.jpg" alt="MI-28 Havoc" />
<img src="img/proximity12.jpg" alt="AH-1W Super Cobra" />
</div>

　　内容很简单就是一个div，里面包含12张图片。接下来是添加css。

<style type="text/css">
/* base classes (scripting disabled) */
#proximity
{
width: 960px;
margin: auto;
border: 1px solid #000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#proximity img
{
border: 1px solid #000;
}
/* scripting enabled classes */
#proximity.slider
{
width: 650px;
height: 250px;
position: relative;
overflow: hidden;
}
.slider #scroller
{
position: absolute;
left: 0;
top: 0;
}
.slider #scroller img
{
display: block;
width: 150px;
height: 150px;
margin: 50px 0 0 50px;
float: left;
color: #fff;
background-color: #000;
}
.slider #scroller img:first-child
{
margin-left: 0;
}
#message
{
width: 100%;
height: 30px;
padding-top: 10px;
margin: 0;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-bottom-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-radius: 0 0 8px 8px;
position: absolute;
bottom: 0;
left: 0;
background-color: #000;
color: #fff;
text-align: center;
font: 18px "Nimbus Sans L" , "Helvetica Neue" , "Franklin Gothic Medium" , Sans-serif;
}
</style>

　　css也很简单，border-radius是css3新增加的属性，可以为边框实现圆角效果，大家可以去网上查相关的api。

　　html有了，css有了，现在就差js代码了。首先我们是定义一些我们需要使用到的js对象。

//获取总的容器对象
var prox = $('#proximity'),
//为图片创建一个新的容器对象
scroller = $('<div></div>', {
id: 'scroller'
}),
//鼠标提示信息
pointerText = 'Use your pointer to scroll, moving to the edge scrolls faster!',
//键盘提示信息
keyboardMessage = "Use your arrow keys to scroll the images!",
//提示信息容器，默认显示键盘提示信息
message = $("<p></p>", {
id: "message",
text: keyboardMessage
});

//将新创建的图片容器对象scroller添加到prox里面，让他包含图片
//同时将提示文本信息添加到prox里面
prox.addClass('slider').wrapInner(scroller).append(message);

//计算prox的宽度的一半，存入变量middle
var middle = prox.width() / 2;

//获取新添加的scroller对象
scroller = $('#scroller');
//计算scroller的宽度，计算规则就是所有图片的宽度加上他的margin-left
scroller.width(function () {
var total = 0;
scroller.children().each(function (i, val) {
var el = $(this);
total = total + (el.outerWidth() + parseInt(el.css('marginLeft')));
});
return total;
})
//设置图片居中
.css('left', '-' + (scroller.width() / 2 - middle) + "px");

　　接下来是定义图片移动函数goAnim()。

//定义图片移动函数
function goAnim(e) {
//获取prox的偏移位置
var offset = prox.offset(),
//鼠标x轴坐标 减去 prox左偏移量 减去 prox的宽度的一半
resetOffset = e.pageX - offset.left - middle,
normalizedDuration = (resetOffset > 0) ? resetOffset : -resetOffset,
//设置动画时间，实现的效果是鼠标越靠近prox的中间，图片运行越慢
//鼠标越靠近prox的两边，图片运行越快
duration = (middle - normalizedDuration) * 50;

scroller.stop().animate({
left: (resetOffset < 0) ? 0 : -(scroller.width() - prox.width())
}, duration, 'linear');
}

　　goAnim()通过计算鼠标的位置判断图片是应该向左还是向右滑动，并计算出图片的滑动速度。为了让大家更好的理解resetOffset，e.pageX ，offset.left ，middle这几个对象，我画了下面的简图，希望对大家有帮助。



　　接下来要做的就是要设置鼠标移动和按键盘相关的事件方法了。

//设置鼠标进入事件
prox.mouseenter(function (e) {
//渐隐提示文字
message.text(pointerText)
.delay(1000)
.fadeOut('slow');
//运行移动方法
goAnim(e);

//设置鼠标移动事件
prox.mousemove(function (event) {
//运行移动方法
goAnim(event);
});
});

//设置鼠标移出事件
prox.mouseleave(function () {
//鼠标移出动画消失
scroller.stop();
//移出鼠标移动事件
prox.unbind('mousemove');
});

//设置键盘事件
$(document).keydown(function (e) {
//判断是否按下键盘左右键
if (e.keyCode === 37 || e.keyCode === 39) {
//提示文件渐隐
message.fadeOut('slow');

//当前没有动画
if (!scroller.is(':animated')) {
//设置动画效果，6秒钟完成图片移动到最左或最右
//按下左键图片移动到最左，按下右键移动到最右
//最左是通过left:0实现的，最右是通过left: -(scroller.width() - prox.width()
scroller.stop().animate({
left: (e.keyCode === 37) ? 0 : -(scroller.width() - prox.width())
}, 6000, 'linear');
}
}
})
//键盘弹起，结束动画
.keyup(function () {
scroller.stop();
});

　　我注释写的比较多，希望对大家理解代码有帮助。有兴趣的朋友可以下载demo观看实际效果。

　　demo下载地址：jquery.animate.proximity.rar