星期一要做一个首页的焦点图，今天在家里想把几个特效模块先组织一下，这才发现其实用JQUERY的API来做焦点图可以很简单。
这篇文章介绍了用slidy API做焦点图的方法：http://www.16sucai.com/uploadfile/show2011/1203030044/
slidy API 的源代码：
/**
* jQuery Slidy - A Transition Plugin - http://wbotelhos.com/slidy
*
* @author Washington Botelho
* @twitter wbotelhos
* @version 0.2.0
* Licensed under The MIT License
* http://opensource.org/licenses/mit-license.php
*
*/
(function(b){b.fn.slidy=function(y){if(this.length==0){a("Selector invalid or missing!");return;}else{if(this.length>1){return this.each(function(){b.fn.slidy.apply(b(this),[y]);});}}var d=b.extend({},b.fn.slidy.defaults,y),i=b(this),r=this.attr("id"),q=i.children(d.children),j=q.length,m=(d.children=="img")?q:q.find("img"),n=0,h=false;if(r===undefined){r="slidy-"+i.index();i.attr("id",r);}i.data("options",d).css({cursor:d.cursor,height:d.height+"px",overflow:"hidden",position:"relative",width:d.width+"px"});q.each(function(B){b(this).css({position:"absolute","z-index":j-B}).attr("id",i.attr("id")+"-"+(B+1));});m.attr({height:d.height,width:d.width}).css("border","0");if(d.children=="a"&&d.target!=""){q.attr("target",d.target);}q.hide().first().show();if(d.menu){$menu=b("<ul/>",{id:r+"-slidy-menu","class":"slidy-menu"}).insertAfter(i);}var u=function(){clearTimeout(n);},g=function(){u();},w=function(D){u();var F=b(this),B=F.index(),C=F.parent().children(".slidy-link-selected"),E=C.index();if(B!=E){C.removeClass("slidy-link-selected");F.addClass("slidy-link-selected");l(E,B);}},v=function(B){t(b(B.target).parent("a").index());},e=function(){var E=b(this),B=E.index(),C=E.parent().children(".slidy-link-selected"),D=C.index();t(D);},s=function(D){u();var F=b(this),B=F.index(),C=F.parent().children(".slidy-link-selected"),E=C.index();if(B!=E){C.removeClass("slidy-link-selected");F.addClass("slidy-link-selected");}t(B);};if(d.menu){var z=(d.target!="")?'target="'+d.target+'"':"",c="",k,A;m.each(function(){A=b(this);k=A.parent(d.children);c+='<li><a href="'+k.attr(k.is("a")?"href":"title")+'" '+z+">"+A.attr("title")+"</a></li>";});$menu.html(c);var x=parseInt((d.width/j)+(j-1)),p=d.width-(x*j),f=$menu.children("li");if(d.action=="mouseenter"){f.mouseenter(w).mouseleave(e);}else{if(d.action=="click"){f.click(s);}else{a('action attribute must to be "click" or "mouseenter"!');return;}}f.css("width",x).first().addClass("slidy-link-selected").end().last().css({"border-right":"0",width:(x+p)-(j-1)});if(d.animation=="slide"||d.animation=="fade"){f.mousemove(function(){var B=b(this);if(!B.hasClass("slidy-link-selected")){B.mouseenter();}});}}t(0);if(d.pause){i.mouseenter(g).mouseleave(v);}function t(B){var D=j-1,C=null;if(B>D){B=0;C=D;}else{if(B<=0){B=0;C=D;}else{C=B-1;}}l(C,B);n=setTimeout(function(){t(++B);},d.time);}function l(C,B){if(!h){h=true;if(d.animation=="fade"){q.eq(C).fadeOut(d.speed).end().eq(B).fadeIn(d.speed,function(){o(B);h=false;});}else{if(d.animation=="slide"){q.css("z-index",0).eq(B).css("z-index",j).slideDown(d.speed,function(){q.eq(C).hide();o(B);h=false;});}else{q.eq(C).hide().end().eq(B).show(0,function(){o(B);h=false;});}}}}function o(B){if(d.menu){i.next("ul.slidy-menu").children().removeClass("slidy-link-selected").eq(B).addClass("slidy-link-selected");}}return i;};function a(c){if(window.console&&window.console.log){window.console.log(c);}}b.fn.slidy.defaults={action:"mouseenter",animation:"normal",children:"img",cursor:"default",height:200,menu:false,pause:false,speed:600,target:"",time:3600,width:500};})(jQuery);
使用这个API只需要一个带有ID的DIV，DIV里面的结构只需要若干包含了IMG标签的A锚点，然后对API自动生成的CSS样式进行自定义，就可以得到想要的焦点图。
例如HTML结构：
<div id="menu"> <a href="#"><img width="640" height="255" title="1" src="images/pic1.jpg"></a> <a href="#"><img width="640" height="255" title="2" src="images/pic2.jpg"></a> <a href="#"><img width="640" height="255" title="3" src="images/pic3.jpg"></a> <a href="#"><img width="640" height="255" title="4" src="images/pic4.jpg"></a> <a href="#"><img width="640" height="255" title="5" src="images/pic5.jpg"></a> <a href="#"><img width="640" height="255" title="6" src="images/pic6.jpg"></a></div>
相应的CSS可以设置为：
#menu{ width:640px;} #menu-slidy-menu{overflow:hidden; width:640px; padding:0; margin:0;} .slidy-menu {background:url(http://img.muyingzhijia.com/images/guanbgho.jpg) repeat-x; } #menu-slidy-menu li { list-style:none; display:block; float:left; text-align:center;} #menu-slidy-menu a{ width:60px; height:40px; color:#ffffff; text-decoration:none;} .slidy-link-selected{ display:block; width:60px; height:40px; float:left; background:url(images/opacity.png) repeat-x transparent;}
根据我要做的需求，有六个焦点图按钮。按钮背景被设计成了带有数字艺术字背景的一系列按钮，鼠标经过和当前按钮都是蒙上一块半透明的白色PNG图片。
所以我只要将所有按钮做成一张大背景，然后用FIREWORKS做一张空白的PNG-8来半透明遮盖“鼠标经过”和“当前焦点”的按钮背景：
.slidy-link-selected{ display:block; width:79px; height:40px; float:left; background:url(images/opacity.png) repeat-x transparent;}
对.slidy-link-selected 进行设置以后就并不需要设置#menu-slidy-menu a:hover {}
在HEAD中添加相应的选项控制:
$(function() { $('#menu').slidy({ animation: 'fade', children: 'a', cursor: 'wait', menu: true, pause: false, speed: 400, time: 4600, width: 640, height: 255 }); });
这样一个可扩展性良好的焦点图就做出来了。
附上slidy API 的默认选项：
action: 'mouseenter'Action to change the slide. ('mouseenter', 'fade' or 'slide')animation: 'normal'Type of the animation effect. ('normal', 'fade' or 'slide')children: 'img'The element in which the transition will be done.cursor: 'default'The type of cursor that will be displayed when it stops over the banner.height: 200Height in pixel of the image banner.menu: falseCreated automatically a menu.pause: falseStop the transition when the mouse over the banner.speed: 600Duration in milliseconds of transition animation effect.target: ''Type of opening the link in the menu and the banner.time: 3600Duration in milliseconds of transition of the banners.width: 500Width in pixel of the image banner.如果选择的children是一个element , menu将需要value为链接的“href”。否则需要“title”属性。
联系客服
