若是人间
潸潸昨日伊人泪,不知今朝尽繁华。若是人间留不住,忘川簇簇彼岸花。
posts - 11,  comments - 103,  trackbacks - 0

闲来无事,练习js,参照网上的一些源码写了一个图片切换程序,刚来博客园,不懂怎么发布js程序,懂的朋友可以留言告之。以下以图片解释。

大致功能如下:

1.图片切换效果有以下几种:随机切换   4格纵向百叶窗  16格横向百叶窗  由里至外逐渐放大   中间向左右两边逐渐放大   中间向上下两边逐渐放大   由上至下落幕   由左至右   由左上至右下   由右下至左上              8格纵向百叶窗    8格纵向百叶窗2   8格万花筒  24格万花筒  4格滑行左上至右下  4格滑行左上至右下  4格滑行落幕   4格滑行延伸。

图示为八格万花筒效果:

2.支持的导航方式有以下几种:

  2.1:数字导航

  

     2.2:图片内部导航:

     

      2.3:图片底部导航

     

     2.4: 左部图片导航

     

     2.5: 右部图片导航

     

     2.6: 无导航

使用方法:

  使用方法力求简单,只需要在head标签中添加

     

window.onload=function(){
				new imgSwitch("imgContainer",{Type:15,Width:874,Height:211,Pause:3000,Speed:"fast",Auto:true,Navigate:"picture",PicturePosition:"right"})	
	}

  参数说明:

     Type:图片切换的方式,目前有0-17,

0: 随机切换

1: 4格纵向百叶窗

2: 16格横向百叶窗

3: 由里至外逐渐放大

4: 中间向左右两边逐渐放大

5: 中间向上下两边逐渐放大

6: 由上至下落幕

7: 由左至右

8: 由左上至右下

9: 由右下至左上

10: 8格纵向百叶窗

11: 8格纵向百叶窗2

12:8格万花筒

13: 24格万花筒

14: 4格滑行左上至右下

15: 4格滑行左上至右下

16: 4格滑行落幕

17: 4格滑行延伸。

     Width:图片的宽度(这个有点小bug,回头改正,修改长高时style.css里面imgContainer也请修改一下)

     Height:图片的高度

     Pause:图片停留的时间

     Speed:图片切换的时间,有三种方式,fast,normal,slow,也可以自定义时间,如:"200",单位是毫秒。默认为normal

     Auto:true或者false,是否自动播放

     Navigate:导航方式,目前有三种,"no"代表无导航,"numberic"代表数字导航,"picture"代表图片导航

     NavigatePlace:导航所在地方。"inner"代表在内部,"outer"代表在外部

     PicturePosition:在Navigate为picture的情况下,有三种方式:"bottom"导航图片在底部 "left"导航图片在左部 "right"导航图片在右部

原理说明

     主要是利用div的position的left,top属性来将图片分为几部分:如

<div style="width: 235px; height: 177px; background-image: url(file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/%E4%BB%A3%E7%A0%81/imgSwitch/images/3.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; clip: rect(0px 235px 177px 0px); background-position: 0px -177px; background-repeat: initial initial; "></div>

  主要的属性有: clip background-position width height background-image

大致顺序为:如果图片要弄成八部,则将长高除以八得到一个div的长高,如width: 235px; height: 177px;然后用bgimage和b-p来确定背景图片:background-position: 0px -177px;

background-image: url(file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/%E4%BB%A3%E7%A0%81/imgSwitch/images/3.jpg);

最后用js来控制clip属性,如 clip: rect(0px 235px 177px 0px);

目前测过的浏览器支持:

IE(6,7,8,9) firfox chrome safari

测试事例完整源代码

个人博客地址http://www.heymemory.com/blog/10/

posted on 2011-08-15 12:12 st.ni 阅读(...) 评论(...) 编辑 收藏