简明现代魔法 -> web设计理念 -> 发布一款优秀的焦点图组件

发布一款优秀的焦点图组件

2011-04-07

焦点图在网站中应用并不少见。该焦点图将js控置逻辑与UI部份分离,有兴趣的朋友可以试试。示例1与示例2为同一组件(animation1.js),示例3的切换模示与之前不同,因此在之前的基础上修改为animation2.js。两图均支持自动切换模式。

【示例1】


【示例2】

【示例3】

pp_index_bg_20110215 index-eles index-life-icons

无论左右滚动,或者上下滚动,都是通过scrollLeft,scrollTop控置的。因此请确保 scrollcontrol 有足够的滚动空间。

结构部份

<div class = "center" id = "appliymain"><!--js控置该容器的scrollLeft,scrollTop实现滚动-->
	<div style = "width:9999px" ><!--该部份用来撑足空间-->
		<div class = "content" id = "subcontent">
			<!--滚动内容部份-->
		</div>
	</div>
</div>

图1,2调用

slide1({
	length:5
	,scrollcontrol:"paipaimain"
	,width:470
	,height:205
	,isLR:"lr"
	,cls:"hover"
	,mode:"slow"
	,rv:1
	,freq:15
	,smallbtn:$(".paipai .nav li").get()
})

图3调用

slide2({
	scrollcontrol:"appliymain"
	,subcontrol:"subcontent"
	,width:550
	,auto:true
	,height:75
	,isLR:"lr"
	,mode:"slow"
	,rv:1
	,leftbtn:"applyleft"
	,rightbtn:"applyright"
	,freq:15
});
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们