炫！旋转灯笼式图片展示
<P>网页图片特效 - 炫！旋转灯笼式图片展示 <A href="http://www.butong.net/img/051126/demonstration.htm">http://www.butong.net/img/051126/demonstration.htm</A></P><P> </P>
<P>把如下代码复制到<head>与</head>之间</P>
<P><script type='text/javascript'><BR>//more javascript from <A href="http://www.smallrain.net">http://www.smallrain.net</A><BR>function carousel(params){<BR> if(!(params.width>0 && isFinite(params.width)))params.width=100;<BR> if(!(params.height>0 && isFinite(params.height)))params.height=100;<BR> if(!(params.sides>2 && isFinite(params.sides)))params.sides=4;<BR> if(!(params.steps>0 && params.steps<100 && isFinite(params.steps)))params.steps=20;<BR> if(!(params.speed>0 && isFinite(params.speed)))params.speed=8;<BR> if(!(params.image_border_width>=0 && isFinite(params.image_border_width)))params.image_border_width=0;<BR> if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random();<BR> <BR> document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[\r\n\t ]+/g,'_')+"'></div>");<BR> var cdiv=document.getElementById(params.id.replace(/[\r\n\t ]+/g,'_'))<BR> cdiv.style.width=params.width+'px';<BR> cdiv.style.height=params.height+'px';<BR> cdiv.style.border=params.border;<BR> cdiv.style.position='relative';<BR> cdiv.style.overflow='hidden';<BR> cdiv.title=params.id;<BR> <BR> var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;<BR> interval=isNaN(interval)?200:interval;<BR> var img_position=[],images=[],img_dimension=[];<BR> var img_index=params.images.length+1,img_index_cap=2*params.images.length;<BR> var faces=Math.ceil(params.sides/2), dimension, direction;</P>
<P> function init(){<BR> if(params.direction=="left" || params.direction=="right"){<BR> direction=params.direction;<BR> dimension="width";<BR> }<BR> else if(params.direction=="top" || params.direction=="bottom"){<BR> direction=params.direction;<BR> dimension="height";<BR> }<BR> else {<BR> direction="left";<BR> dimension="width";<BR> } <BR> cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';<BR> var img=new Image();<BR> img.style.position='absolute';<BR> img.style[direction]='10000px';<BR> img.style.width=params.width-2*params.image_border_width+'px';<BR> img.style.height=params.height-2*params.image_border_width+'px';<BR> img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color;<BR> <BR> for(var i=0;i<params.images.length;i++){<BR> images[i]=img.cloneNode(true);<BR> images[i].src=params.images[i];<BR> if(params.links && params.links[i] && params.links[i]!=''){<BR> images[i].onclick=new Function("window.location='"+params.links[i]+"'");<BR> images[i].style.cursor=document.all?'hand':'pointer';<BR> }<BR> if(params.titles && params.titles[i] && params.titles[i]!='')<BR> images[i].title=params.titles[i];<BR> images[i+params.images.length]=images[i];<BR> if(params.images.length==faces)<BR> images[i+2*params.images.length]=images[i];<BR> cdiv.appendChild(images[i]);<BR> }<BR> <BR> var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);<BR> var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;<BR> var pi_piece=2*Math.PI/params.steps/params.sides;<BR> for(i=0;i<=params.steps*faces;i++){<BR> img_dimension[i]=face_size*Math.sin(pi_piece*i);<BR> img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':'10000px';<BR> img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';<BR> }<BR> }<BR> init();</P>
<P> cdiv.rotate = function(){<BR> setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);<BR> if(!spinning) return;<BR> if(++counter>=params.steps){<BR> counter=0;<BR> if(++img_index>=img_index_cap)<BR> img_index=params.images.length;<BR> }<BR> images[img_index-faces].style[direction]='20000px';<BR> for(var i=faces-1;i>=0;i--){<BR> images[img_index-i].style[direction]=img_position[counter+i*params.steps];<BR> images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];<BR> }<BR> }<BR> cdiv.onmouseover=function(){<BR> spinning=false;<BR> }<BR> cdiv.onmouseout=function(){<BR> spinning=true;<BR> }<BR> setTimeout('document.getElementById("'+cdiv.id+'").rotate()',200);<BR> }<BR></script></P>
<P>把如下代码复制到<body>与</body>之间</P>
<P><h3><font color="#FFFFFF">水平方向滚动</font></h3><BR><font color="#FFFFFF"><BR><script type='text/javascript'><BR>carousel({id:'Amazon Books', //Enter arbitrary but unique ID of this slideshow instance<BR> border:'',<BR> size_mode:'image', //Enter "carousel" or "image". Affects the width and height parameters below.<BR> width:107, //Enter width of image or entire carousel, depending on above value<BR> height:140, //Enter height of image or entire carousel, depending on above value<BR> sides:6, //# of sides of the carousel. What's shown = sides/2. Even integer with sides/2< total images is best<BR> steps:23, //# of animation steps. More = smoother, but more CPU intensive<BR> speed:5, //Speed of slideshow. Larger = faster.<BR> direction:'left', //Direction of slideshow. Enter "top", "bottom", "left", or "right"<BR> images:['photo1.jpg',<BR> 'photo2.jpg',<BR> 'photo3.jpg',<BR> 'photo4.jpg'],<BR> links: ['http://www.butong.net',<BR> 'http://www.butong.net',<BR> 'http://www.butong.net/background/index.htm',<BR> 'http://www.butong.net/navigation/index.htm'],<BR> titles:['javascript特效',<BR> '网页特效库',<BR> '背景特效',<BR> '导航特效'],<BR> image_border_width:1,<BR> image_border_color:'blue'<BR> });<BR></script></P>
<P><BR></font></P>
<P><BR><h3><font color="#FFFFFF">竖直方向滚动</font></h3><BR><script type='text/javascript'><BR>carousel({id:'carousel_1', //Enter arbitrary but unique ID of this slideshow instance<BR> border:'',<BR> size_mode:'image', //Enter "carousel" or "image". Affects the width and height parameters below.<BR> width:107, //Enter width of image or entire carousel, depending on above value<BR> height:140, //Enter height of image or entire carousel, depending on above value<BR> sides:8, //# of sides of the carousel. What's shown = sides/2. Even integer with sides/2< total images is best<BR> steps:8, //# of animation steps. More = smoother, but more CPU intensive<BR> speed:7, //Speed of slideshow. Larger = faster.<BR> direction:'top', //Direction of slideshow. Enter "top", "bottom", "left", or "right"<BR> images:['photo1.jpg',<BR> 'photo2.jpg',<BR> 'photo3.jpg',<BR> 'photo4.jpg'],<BR> links: [],<BR> titles:[],<BR> image_border_width:1,<BR> image_border_color:'black'<BR> });<BR></script></P>
页:
[1]