网页特效之imageflow

最新推荐文章于 2017-11-09 11:09:29 发布

逻辑艺术家

最新推荐文章于 2017-11-09 11:09:29 发布

阅读量3.3k

点赞数

分类专栏：网络在线文章标签： image stylesheet structure function xhtml

本文链接：https://blog.csdn.net/starter110/article/details/6998773

版权

网络在线专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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);

逻辑艺术家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
网页特效之imageflow

imageflow的官网http://imageflow.finnrudolph.de/下载页http://finnrudolph.de/ImageFlow/Downloadimageflow是基于js的网页图片滚动特效工具实现的代码是imageflow.js，倒影效果的实现是php在服务器端实现的，倒影实现的代码是reflect2.php（非png图片）和reflect3.php
复制链接

扫一扫