JS实现两张图片卷轴的切换效果

效果参见：
http://weitwo.com/home.htm

引入jQuery后，

再引入如下JS:

$(document).ready(function () {
var slidePicture = new sliderPicture();
slidePicture.containerId = 'container';
slidePicture.frontId = 'front';
slidePicture.minFrontWidth = 100;
slidePicture.load();
});

function sliderPicture() {
this.containerId = '';
this.frontId = '';
this.minFrontWidth = 200;

this.load = function () {

var container = $('#' + this.containerId);
var front = $('#' + this.frontId);
var minWith = this.minFrontWidth;

container.mousemove(function (e) {
var offsetLeft = container.prop("offsetLeft");
var parentWidth = container.prop("clientWidth");
var left = e.clientX - offsetLeft;
var width = parentWidth - left;

if (width >= minWith) {
front.width(width);
}
});
}
}

添加如下样式：

#container
{
background:url('http://photocdn.sohu.com/20110527/Img308750491.jpg');
width:90%;
height:200px;
margin:0px auto;
}

#front
{
float:right;
background:url('http://news3.xinhuanet.com/auto/2005-07/06/xinsrc_3520702061714562873521.jpg');
background-position:right;
width:30%;
height:100%;
}

#splitter
{
background:#000000;
height:100%;
float:left;
width:5px;
}

添加如下HTML：

<div id="container">
<div id="front">
<span id="splitter"></span>
</div>
</div>

即可实现图片卷轴的效果。