Image flow使用

1、chrome 浏览器中F12快捷键用于打开或者关闭调试窗口,F11用于进入/退出全屏。

2、image flow 各属性的用法,

(1)reflections属性,如果下载之后解压并运行就会发现图片显示不出来,都是一个个框框,这很可能是没有找到图片的问题,在chrome浏览器中按F12进入调试界面,可以看到图片的路径不对,并不是img/XXX.png,如下图所示:


Image flow使用_第1张图片

打开其imageflow.js文件,可以看到下面一句话:

				if(my.reflections === true)
				{
					version = (my.reflectionPNG) ? '3' : '2';
					src = my.imagePath+node.getAttribute('src',2);
					src = my.reflectPath+'reflect'+version+'.php?img='+src+my.reflectionGET;
					node.setAttribute('src',src);
				}

在imageflow.js开头将reflections属性设置为false即可。

(2)circular属性,用于表示是否循环播放图片。



3、将

	<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>
修改为:

	<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.css" type="text/css" />
		<script type="text/javascript" src="imageflow.js"></script>

	</head>


4、网上有人提供这样一种显示背景的方法:

利用一个DIV层,在里面装载一个IMG标签。然后设置DIV和IMG的大小为100%,并固定到屏幕最底层,这样就实现了完美的拉伸并最大化图片的目的。 
首先在Body中加入下面的代码: 

复制代码
代码如下:

<div id="div1"><img src="img.jpg" /></div> 

然后加入CSS代码: 

复制代码
代码如下:

div#div1{ 
position:fixed; 
top:0; 
left:0; 
bottom:0; 
right:0; 
z-index:-1; 

div#div1 > img { 
height:100%; 
width:100%; 
border:0; 



 
 

你可能感兴趣的:(Image flow使用)