今天我们要介绍的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
