See:
Http://weitwo.com/home.htm
After jquery is introduced,
Introduce the following 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 );
}
});
}
}
Add the following style:
# 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;
}
Add the following HTML:
<Div id = "Container">
<Div id = "Front">
<Span id = "splitter"> </span>
</Div>
</Div>
The image scroll effect can be achieved.