网页特效之imageflow

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="data: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; //yunsendocument.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);

网页特效之imageflow相关推荐

网页特效代码集合+实例(C#)
文本框走动跑马灯 <SCRIPT Language="JavaScript"> var msg="欢迎访问网页特效代码 www.qpsh.com " ...
html图片跟随鼠标,跟随鼠标的图片 - 网页特效代码|网页特效观止 - 让你的网页靓起来！...
跟随鼠标的图片 [ 发布者:在远方┊来源:本站整理┊时间:2006-03-08┊浏览: 人次 ] 网页特效|JsCode.cn|---跟随鼠标的图片 var newtop=0 var newleft= ...
php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
JavaScript学习笔记（6）BOM（浏览器对象模型）pc网页特效（停止学习）
文章目录什么是BOM(浏览器对象模型) BOM中的window对象(顶级对象) window对象常见事件窗口加载事件 window.onload(等待文档内容全部加载完成才会触发,这样可以把js代 ...
需要按次序点击链接的网页特效
需要按一次次序来点击链接的网页特效,有些前端开发者将其命名为"先点击后链接",需要按要求一个一个点击链接后才能让指定的链接生效,记得以前这种功能常被用于广告上面,用户不点击广告,就 ...
javaScript PC端网页特效
PC端网页特效 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 2. 元素可视区 client 系列 2.1 立即执行函数 2.2 loa ...
HTML5 canvas点击爆炸网页特效代码
简介: HTML5 canvas点击爆炸网页特效代码, 直接写在想要出现特效的页面,如果是cms则放在所用的模板文件下foot.php文件里. 网盘下载地址: http://kekewl.net/3D ...
闹猴网页特效集软件 v1.0.5.21
闹猴网页特效集是一款网页特效代码,脚本特效演示软件,演示类别包括:链接文字特效.菜单导航特效.游戏测试特效.计数转换特效.表单转换特效.表格色彩特效.图层样式特效.图片背景特效.页面窗口特效.键盘鼠标 ...
一个搜集大量网页特效的网站
一个搜集大量网页特效的网站:http://www.jsfoot.com/jquery/images/gg/ 首页 > jquery特效 > jquery图片特效 > jquery幻灯 ...

网页特效之imageflow

网页特效之imageflow相关推荐

最新文章

热门文章