标签:
页面布局
<ul class="OutDiv"> <li> <img class="OutImg" src="images/0.jpg"/> </li> <li> <img class="OutImg" src="images/1.jpg"/> </li> <li> <img class="OutImg" src="images/2.jpg"/> </li> <li> <img class="OutImg" src="images/3.jpg"/> </li> </ul>
jQuery实现
通过创建 div格子 填充页面的img 然后定位div格子的背景位置 实现背景分离效果
function imgSet(setW,setH,index)
{
//设置OutDiv和OutImg的宽带高度
$(‘.OutImg‘).css({height:setH,width:setW});
$(‘.OutDiv‘).css({height:setH,width:setW});
//获取img的宽度 高度
var imgWidth=$(‘.OutImg‘).width();
var imgHeigh=$(‘.OutImg‘).height();
var ex=/^\d+$/;
//计算需要的格子数目
//XCount记录一行多少个格子 YCount记录列
//X记得列格子宽度 Y记录列格子高度
for(var XCount=8;XCount>1;XCount--){
var X=imgWidth/XCount;
if (ex.test(X) ) {
break;
}
}
for(var YCount=3;YCount>0;YCount--){
var Y=imgHeigh/YCount;
if ((Y%10)==0 ) {
break;
}
}
//创建格子
for(var i=0;i<XCount*YCount;i++)
{
var xtemp=i%XCount*X;
var ytemp=parseInt(i/XCount)*Y;
var ok=parseInt(i/XCount)*Y;
var bgposition="-"+xtemp+"px "+"-"+ytemp+"px";
var tempDiv=$("<div class=‘innerDiv‘></div>").css({
‘position‘:‘absolute‘,
‘width‘:X,
‘height‘:Y,
‘left‘:xtemp,
‘top‘:ytemp,
‘background-position‘:bgposition,
});
//添加到Div中
$(‘.OutDiv‘).append(tempDiv);
var bgindex=‘./images/‘+index+‘.jpg‘;
$(‘.innerDiv‘).css(‘background-image‘,‘url(‘+bgindex+‘)‘);
}
}
滑动效果
function sildeLR(speed){
//动画效果
var LDiv=$(‘.innerDiv:odd‘)
var RDiv=$(‘.innerDiv:even‘)
var InnerDiv=$(‘.innerDiv‘).width();
var OutWidth=$(‘.OutImg‘).width();
LDiv.each(function(){
//获取div的left
var scrLeft=$(this).position().left+InnerDiv;
$(this).animate({
left:scrLeft,
opacity:0.2},(speed/2),
//接着上一个动画
function(){
$(this).fadeOut(200).remove();
RDiv.each(function(){
var scrLeft=$(this).position().left-OutWidth;
$(this).animate({
left:scrLeft,
opacity:0.2},speed,
function(){
$(this).remove();
});
});
});
});
//动完结束后
}
虽然滑动效果感觉并没有 自己想要的那种感觉....但起码也是实现了
标签:
原文地址:http://www.cnblogs.com/xshaobaozi/p/4991359.html