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>

 

 

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