网页特效之imageflow

来源：互联网发布：重启网卡 linux 编辑：程序博客网时间：2024/06/05 05:00

imageflow的官网

http://imageflow.finnrudolph.de/

下载页

http://finnrudolph.de/ImageFlow/Download

imageflow是基于js的网页图片滚动特效工具实现的代码是imageflow.js，倒影效果的实现是php在服务器端实现的，倒影实现的代码是reflect2.php（非png图片）和reflect3.php（png图片），使用方法如下：

1. 先创建一个imageflow对象，并设置初始参数如

/* Create ImageFlow instances when the DOM structure has been loaded */domReady(function(){instanceOne = new ImageFlow();//instanceOne.init({ ImageFlowID:'myImageFlow' });/**/instanceOne.init({ ImageFlowID:'myImageFlow',  reflectionGET:'&cache=1',  reflectionPNG:false,  aspectRatio:3.2,  containerHeight:360,  //xStep:150,  //buttons:true,   reflections:true,  reflectionP:0.65,  //reflectionP:0.65,  //imagesHeight: 1.0,   //imageFocusM:0.8,  //opacity:true,  glideToStartID:false,  slideshowSpeed:4000,  circular:true,  slider:false,  startAnimation:false,  slideshowAutoplay:true,  slideshow:true });/**/});

参数属性请参考官网介绍（比较全面）

http://finnrudolph.de/ImageFlow/Documentation

2. 在网页html中添加要flow的图片代码如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8" />  <title>ImageFlow</title>  <meta name="robots" content="index, follow, noarchive" />  <link rel="stylesheet" href="style.css" type="text/css" />  <!-- This includes the ImageFlow CSS and JavaScript -->  <link rel="stylesheet" href="imageflow.packed.css" type="text/css" />  <script type="text/javascript" src="imageflow.packed.js"></script></head><body>  <h1>ImageFlow</h1>  <!-- This is all the XHTML ImageFlow needs -->  <div id="myImageFlow" class="imageflow">   <img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 1" />   <img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 2" />   <img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 3" />   <img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 4" />   <img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 5" />   <img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 6" />   <img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 7" />   <img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 8" />   <img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 9" />   <img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 10" />   <img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 11" />   <img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 12" />   <img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 13" />   <img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 14" />   <img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 15" />  </div></body></html>

DIV（myImageFlow）下面的图片就是可以flow的图片，在头部注意保护imageflow.packed.js。

3.imageflow提供了一下动态控制的方法

http://finnrudolph.de/ImageFlow/Combinations

在具体应用的时候当imageflow提供的效果不能满足应用的时候需要加以控制和必要的修饰这时必须要需要访问imageflow的元素，查看imageflow的实现js代码其中：

if(this.createStructure())   {    this.imagesDiv = document.getElementById(my.ImageFlowID+'_images');    this.captionDiv = document.getElementById(my.ImageFlowID+'_caption');    this.navigationDiv = document.getElementById(my.ImageFlowID+'_navigation');    this.scrollbarDiv = document.getElementById(my.ImageFlowID+'_scrollbar');    this.sliderDiv = document.getElementById(my.ImageFlowID+'_slider');    this.buttonNextDiv = document.getElementById(my.ImageFlowID+'_next');    this.buttonPreviousDiv = document.getElementById(my.ImageFlowID+'_previous');    this.buttonSlideshow = document.getElementById(my.ImageFlowID+'_slideshow');    this.indexArray = [];    this.current = 0;    this.imageID = 0;    this.target = 0;    this.memTarget = 0;    this.firstRefresh = true;    this.firstCheck = true;    this.busy = false;    /* Set height of the ImageFlow container and center the loading bar */    var width = this.ImageFlowDiv.offsetWidth;    var height = Math.round(width / my.aspectRatio);    if (my.containerHeight>1) height = my.containerHeight; //yunsen    document.getElementById(my.ImageFlowID+'_loading_txt').style.paddingTop = ((height * 0.5) -22) + 'px';    ImageFlowDiv.style.height = height + 'px';    /* Init loading progress */    this.loadingProgress();   }

这部分是其内部实现时的句柄集合，因此在外部我们可以这样访问：

获取当前焦点图片的title

instanceOne.imagesDiv.childNodes[instanceOne.imageID].getAttribute("title");

获取当前焦点图片的longdesc
instanceOne.imagesDiv.childNodes[instanceOne.imageID].getAttribute("longdesc");

不只可以通过上面的方法访问imageflow的obj，访问其内部的方法也是可以的如在js中调用

instanceOne.Slideshow.stop();

可以使得滚动停止

instanceOne.Slideshow.start();

可以使得滚动启动。

当imageflow内部的方法无法满足应用需求的时候还可以在内部添加用户自定义的方法如，在内部添加(红色为添加部分)

this.defaults ={  outline0:   "3px solid #000",  outline:   "3px solid #000",  ....}this.setOutline = function(str){my.outline = str;my.imagesDiv.childNodes[this.imageID].style.outline = my.outline;}

上面功能是添加添加一个函数设置图片的outline属性，在外面可以这样调用：

var hilite = "4px solid #f90";instanceOne.setOutline(hilite);