超炫天猫商城多格子带遮罩效果焦点图

超炫天猫商城多格子带遮罩效果焦点图，兼容IE6，IE7，IE8，IE9，IE10，火狐等主流浏览器

效果图：

html代码:

<div style=”padding-top:10px; padding-right:250px;” >
<div>
<ul>
<li><a href=”http://www.sweiku.com” title=”思维酷-IT专业博客  作者：口明明口”><img src=”images/1.jpg” width=”760″ height=”470″/></a></li>
<li>
<div><a href=”http://www.sweiku.com” title=”思维酷-IT专业博客  作者：口明明口”><img src=”images/21.jpg” /></a></div>
<div><a href=”http://www.sweiku.com” title=”思维酷-IT专业博客  作者：口明明口”><img src=”images/22.jpg” /></a><a href=”#”><img src=”images/23.jpg” /></a><a href=”#”><img src=”images/24.jpg” /></a></div>
</li>
<li>
<div><a href=”http://www.sweiku.com” title=”思维酷-IT专业博客  作者：口明明口”><img src=”images/31.jpg”/></a><a href=”#”><img src=”images/32.jpg” /></a><a href=”#”><img src=”images/330.jpg” width=”520″ height=”260″/></a></div>
<div><a href=”http://www.sweiku.com” title=”思维酷-IT专业博客  作者：口明明口”><img src=”images/34.jpg” width=”240″ height=”470″/></a></div>
</li>
<li>
<div><a href=”http://www.sweiku.com” title=”思维酷-IT专业博客  作者：口明明口”><img src=”images/41.jpg”/></a></div>
<div><a href=”http://www.sweiku.com” title=”思维酷-IT专业博客  作者：口明明口”><img src=”images/22.jpg” /></a><a href=”#”><img src=”images/23.jpg” /></a><a href=”#”><img src=”images/24.jpg” /></a></div>
</li>
<li><a href=”http://www.sweiku.com” title=”思维酷-IT专业博客  作者：口明明口”><img src=”images/1.jpg” width=”760″ height=”470″/></a></li>
</ul>
<ul>
<li title=”思维酷-IT专业博客  作者：口明明口”>1</li>
<li title=”思维酷-IT专业博客  作者：口明明口”>2</li>
<li title=”思维酷-IT专业博客  作者：口明明口”>3</li>
<li title=”思维酷-IT专业博客  作者：口明明口”>4</li>
<li title=”思维酷-IT专业博客  作者：口明明口”>5</li>
</ul>
<div></div>
</div>
<div style=”padding-left:10px; font-size:20px; color:Red;”><p><a href=”http://www.sweiku.com” title=”思维酷-IT专业博客  作者：口明明口”><span style=”font-size: 11pt”>
思维酷-IT专业博客</span></a></p>
<p> <a href=”http://www.sweiku.com” title=”思维酷-IT专业博客  作者：口明明口”><span style=”font-size: 11pt”>
作者：口明明口</span></a></p>
<p> <a href=”http://www.sweiku.com” title=”思维酷-IT专业博客  作者：口明明口”><span style=”font-size: 11pt”>
更多作品，请访问：<br /><span style=”text-decoration: underline”><strong>http://www.sweiku.com</strong></span></span></a></p>
</div>
</div>

Javascript:

function slide(obj,select_obj,setp,s){//幻灯片
var n=0;
var MainBox=obj.parent();
var Millisecond=300;
var left=MainBox.css(“left”);
var left=left.replace(“px”,”")-setp;
var ManLeft=(-(obj.length*setp));
var intA;
select_obj.click(function(){
var i=n;
n=$(this).index();
select_obj.eq(i).removeClass(“selected”);
select_obj.eq(n).addClass(“selected”);
var leftb=(-n*setp);
MainBox.animate( {left:leftb},Millisecond);
});
function slide_main(){
var leftb=(-n*setp);
if(n<4)
{
select_obj.eq(n).removeClass(“selected”);
n=n+1;
leftb=(-n*setp);
select_obj.eq(n).addClass(“selected”);
MainBox.animate( {left:leftb},Millisecond);
}
else
{
select_obj.eq(n).removeClass(“selected”);
n=0;
select_obj.eq(n).addClass(“selected”);
MainBox.animate( {left:0},Millisecond);
}
}
function setI(){clearInterval(intA);intA=setInterval(slide_main,s)}
MainBox.parent().hover(function(){clearInterval(intA);},function(){clearInterval(intA); intA=setInterval(slide_main,s-2000);})
return setI;

}

 

源码下载：

http://www.sweiku.com/cool-tmall-lattice-matte-effect-focus-diagram.html