[菜鸟自学三]图片切换(滤镜IE Only)

GoodNess2010 2010-01-14 09:12:13
主要是IE下滤镜的应用.效果仅IE浏览器可见. 需跨浏览器建议使用flash
代码:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> RevealTrans </title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

  <style>

  	body{background-color: #CCCCCC;}

  	#container {width: 525px;text-align: center;margin: 0 auto;}	

	#context {background-color: #777777;border: 2px solid #555555;width: 500px;}	

	#context img {border: none;margin: 0px;}	

	#nav {width: 510px;height: 140px;overflow: hidden;list-style: none;margin-top: 3px;position: relative;	padding-left: 0px; margin-left:3px}	

	#nav li {float: left; margin: 0 7px 4px 0;border: 2px solid #555;}	

	#nav div {width: 90px;height: 60px; overflow: hidden;}	

	#nav div img {width: 95px;height: 60px;}

  </style>

  <script>

  	/*!

	 *	RevealTrans

	 *	http://www.cnblogs.com/goodness2010/

	 *

	 *  Copyright (c) 2009 GoodNess2010

	 *  Date: 2009-1-13 (星期三)

	 */

	var $ = function(id) { return document.getElementById(id) };

	var isIE = navigator.userAgent.indexOf('MSIE') != -1 ? true : false;

	var $extend = function(a, b) { for(var c in b) { a[c] = b[c]; } return a; };

	var forEach = function(array, callback, thisp) {

		if(array.forEach){ 

			array.forEach(callback, thisp);

		}else {

			for(var i = 0, len = array.length; i < len; i++) {

				if(i in array) callback.call(thisp, array[i], i, array);

			}

		}

	};

	var RevealTrans = function(cId, options) {

		this.cId = cId;

		this.timer = null;

		this.curImg = null;

		this.index = 1;

		$extend(this, this.setOptions(options));

		this.init();

	};



	RevealTrans.prototype = {

		constructor: RevealTrans,

		// 初始化函数

		init: function() {

			this.createStruct();

			this.bindEvents();

		},

		// 设置默认参数

		setOptions: function(options) {

			this.options = {

				auto: true,			// 是否自动切换

				transition: 23,		// 滤镜参数(详见说明)

				duration: 1.5,		// 滤镜转换所用时间(单位为秒)

				minOpa: 40,			// 导航图片的初始透明度

				maxOpa: 100,		// 导航图片的最终透明度

				pause: 2000,        // 自动切换间隔时间

				coll: [],			// 图片集合

				onEnd: function(){} // 图片滤镜转换结束自定义函数

			};

			return $extend(this.options, options || {});

		},

		// 生成HTML结构

		createStruct: function() {

			var _html = '', _this = this;

			forEach(this.coll, function(O) {

				_html += '<li><div><img src = ' + O + '></div></li>';

			});

			$(this.cId).innerHTML = _html;

			$('context').innerHTML = '<img src=' + this.coll[0] + '>';

			this.bindEvents();



		},

		// 设置透明度

		setOpacity: function(O, opacity) {

			if(!!isIE) O.style.filter = "alpha(opacity=" + opacity + ")";

			else O.style.opacity = opacity / 100;

		},

		// 绑定相关事件

		bindEvents: function() {

			var imgs = $(this.cId).getElementsByTagName('img'), _this = this;

			forEach(imgs, function(O, index) {

			    index > 0 ? _this.setOpacity(O, _this.minOpa) : _this.curImg = O;

				O.onmouseover = function() { this.style.cursor = 'pointer'; };

				O._index = index;

				O.onclick = function() { _this.onStart(this); _this.index = this._index;};

			});

			// 默认演示第一个图片

			this.onStart(imgs[0]);

		},

		// 开始滤镜切换

		onStart: function(O) {

			var _this = this, context = $('context').getElementsByTagName('img')[0];

			_this.onStop();

		    _this.setOpacity(_this.curImg, _this.minOpa);_this.setOpacity(O, _this.maxOpa); 

			_this.curImg = O;

			if(isIE) {

				context.style.filter = "revealTrans()";

				_this.transFx(context); 					

			}

			context.setAttribute('src', O.getAttribute('src'));	

			// 判断是否自动切换

			if(!!this.auto) {

				var len = this.coll.length;

				_this.timer = setTimeout(function(){

					_this.index < len ? _this.index++ : _this.index = 1;

					_this.onStart($(_this.cId).getElementsByTagName('img')[_this.index - 1]);

				}, this.pause);

			}

		},

		// 滤镜演示

		transFx: function(O) {

			with(O.filters.revealTrans) {

				Transition = parseInt(this.transition, 10); Duration = parseFloat(this.duration); apply(); play();

			}

		},

		// 清除时间戳

		onStop: function() {

			clearInterval(this.timer);

		}

	};

  </script>

 </head>



 <body>

  	<div id="container">

  		<div id="context"></div>

        <ul id="nav"></ul>

    </div>

	<script>

		 new RevealTrans('nav', {coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg']});

	</script>

 </body>

</html>

详细请见:http://www.cnblogs.com/goodness2010/archive/2010/01/13/1646656.html

广告一下自己的索引:
[菜鸟自学一]日期联动http://topic.csdn.net/u/20091215/11/3e361cb7-6437-456c-b9ea-b1122401f9ff.html
[菜鸟自学二]简易日历http://topic.csdn.net/u/20100112/09/1eb255f6-6309-470d-9a6b-452398c7ec13.html


这些效果都是很简单. 但写程序都是由易到难的过程. 只要坚持实践坚持思考 就会进步. 希望大家多提意见和支持.希望坚持下去我也能够写出 比较好的效果
...全文
414 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
happinessman88 2010-02-11
  • 打赏
  • 举报
 回复
好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好新年好
打字员 2010-01-15
  • 打赏
  • 举报
 回复
亲自动手，才有进步！

加油！
千游 2010-01-15
  • 打赏
  • 举报
 回复
学习
Click_Me 2010-01-15
  • 打赏
  • 举报
 回复
支持下
GoodNess2010 2010-01-15
  • 打赏
  • 举报
 回复
D
cdw3000 2010-01-14
  • 打赏
  • 举报
 回复
支持
GoodNess2010 2010-01-14
  • 打赏
  • 举报
 回复
D
GoodNess2010 2010-01-14
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 haiyong_sea 的回复:]
支持原创！
[/Quote]

谢谢你的鼓励
真哥哥 2010-01-14
  • 打赏
  • 举报
 回复

支持原创！
GoodNess2010 2010-01-14
  • 打赏
  • 举报
 回复

一个人也没有....
GoodNess2010 2010-01-14
  • 打赏
  • 举报
 回复
[文字说明]

图片切换:主要通过更改图片的链接.切换相应的图片. 如果设置了自动切换.就自动控制索引,如果达到最大值就重置为0.

透明度设置: 这个也很简单.只要区别IE和其他浏览器的opacity就可以了.

滤镜设置:

RevealTrans是IE下的滤镜.很可惜在FF等不支持滤镜的浏览器会失去效果.(如果需要跨浏览器的这种效果可以考虑flash).

RevealTrans滤镜设置步骤:

1.context.style.filter = "revealTrans()"; // 将图片filter属性设置为revealTrans();
2.
with(O.filters.revealTrans) {
Transition = parseInt(this.transition, 10); // 设置转换参数
Duration = parseFloat(this.duration); // 设置转换时间
apply(); play(); // 设置滤镜并执行
}

其中Transition参数说明如下:

transition :　 可选项。整数值(Integer)。设置或检索转换所使用的方式。 0 :　 矩形收缩转换。
1 :　 矩形扩张转换。
2 :　 圆形收缩转换。
3 :　 圆形扩张转换。
4 :　 向上擦除。
5 :　 向下擦除。
6 :　 向右擦除。
7 :　 向左擦除。
8 :　 纵向百叶窗转换。
9 :　 横向百叶窗转换。
10 :　 国际象棋棋盘横向转换。
11 :　 国际象棋棋盘纵向转换。
12 :　 随机杂点干扰转换。
13 :　 左右关门效果转换。
14 :　 左右开门效果转换。
15 :　 上下关门效果转换。
16 :　 上下开门效果转换。
17 :　 从右上角到左下角的锯齿边覆盖效果转换。
18 :　 从右下角到左上角的锯齿边覆盖效果转换。
19 :　 从左上角到右下角的锯齿边覆盖效果转换。
20 :　 从左下角到右上角的锯齿边覆盖效果转换。
21 :　 随机横线条转换。
22 :　 随机竖线条转换。
23 :　 随机使用上面可能的值转换


公有24种滤镜.其中23比较特殊可以随机样式.这里我默认使用的就是随机的.大家也可以根据自己的爱好去设置.

Duration参数:

duration :　 可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式
[代码使用]

new RevealTrans('nav', {coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg']});

其中第二项{}的设置可以对照我的setOptions的默认项进行自定义. 比如你不想自动切换则可以改为:

new RevealTrans('nav', {
coll:['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'],
auto: false
});

itliyi 2010-01-14
  • 打赏
  • 举报
 回复
支持 接分
（HDUACM201303版_15）筛选法及预处理（附菜鸟的23个经典错误）
杭电ACM课件2014版之（HDUACM201303版_15）筛选法及预处理（附菜鸟的23个经典错误）
菜鸟自学之——SRA Toolkit 的下载和使用
菜鸟自学之——SRA Toolkit 的下载和使用 第一次写博客，必须mark一下：2018.07.27 sra toolkit是ncbi上将 .sra文件转换为 .fstaq.gz文件的工具。 1.下载/调用 SRA Toolkit 可以直接在linux里在线下载，要根据自己的系统选择合适的安装版本。我查看了一下主机的linux为redhat类型，没找到这个类型的版本，又去服务器看了...
Cocos开发VR菜鸟宝典
由知名Cocos技术讲师火云红孩儿主讲的Cocos 开发 VR的系统课程，包括硬件选择，Cocos开发VR的框架搭建，陀螺仪处理，手柄处理，打包发布等各项技术。
我是如何自学C语言的（一个菜鸟的学习路）
--------------------------------------------------------------------------------------------------------------------------- 零基础扫盲课： 计算机科学速成课（扫盲课）:http://www.bilibili.com/video/av21376839?...
如何自学平面设计—菜鸟必备
作为一名菜鸟，如何自学平面设计？这是一个老生常谈的问题了。何下手、如何学软件、应该看什么书？需要掌握哪些技能才可以找到工作等等，，也有不少人回答这个问题的，但是真正说到点子上的并不太多。今天小编针对如何自学平面设计给大家简单介绍一下。 一、 初学第一步—时间 无论师软件还是设计理论，只要想获得某个技巧或者方法，都可以找到。难的是今天学ps、明天学AI，今天做字体，明天学版式。没有好的时间规划，三年内都难有所成！ So 罗利一张时间规划表，必须严格按计划执行！ 二、初学者学软件的步骤？ 先学ps，后学AI
JavaScript

87,924

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章