浏览 10302 次
|
锁定老帖子 主题：图片切换效果
精华帖 (0) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-03-19
最后修改：2010-04-16
图片预览效果
可通过修改CSS自定义图片预览框的大小及位置，以及边框属性；通过参数设置播放速度。
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>图片切换效果</title>
<style>
<!--
#idContainer {
border:solid 5px white;
width:600px;
height:440px;
overflow:hidden;
background:white;
}
-->
</style>
</head>
<body>
<div id="idContainer">
<img src="/images/large_3203o61.jpg" />
<img src="/images/large_3222p61.jpg" />
<img src="/images/large_3305m61.jpg" />
<img src="/images/large_3324c61.jpg" />
<img src="/images/large_8669l177.jpg" />
<img src="/images/large_8737f177.jpg" />
<img src="/images/large49980.jpg" />
</div>
<script type="text/javascript">
<!--
var ip = new ImagePreview("idContainer");
//-->
</script>
</body>
</html>
在<head>中插入如下JS代码：
<script type="text/javascript">
<!--
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
// 实例化一个对象并调用对象的initialize方法
var Class = {
create : function() {
return function() {
this.initialize.apply(this, arguments);
};
}
};
// 为Object添加一个extend方法
Object.extend = function(destination, source) {
for ( var property in source) {
destination[property] = source[property];
}
return destination;
};
// 为对象注册事件
var addEventHandler = function(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
//遍历数组
var each = function(list, fun) {
for (var i = 0; len = list.length, i < len; i++) {
fun(list[i], i);
}
};
var ImagePreview = Class.create();
ImagePreview.prototype = {
initialize : function(idContainer, options) {
var oThis = this;
this.container = $(idContainer);
this.images = this.container.getElementsByTagName("img") || {};
each(this.images, function(o) {o.style.display = "none";});
this.timer = null;
this.count = 0; // 记录当前显示第几个图片
this.setOptions(options);
this.container.style.overflow = "hidden";
this.container.style.position = "relative"; // 注意此处的定位属性必须为relative
this.width = this.container.clientWidth;
this.height = this.container.clientHeight;
this.img = document.createElement("img");
this.img.style.width = this.width + "px";
this.img.style.height = this.height + "px";
this.img.src = this.images[0].src; // 初始化时显示第一张图片
this.previewDiv = document.createElement("div");
this.previewDiv.style.position = "absolute"; // 注意此处的定位属性必须为absolute
this.previewDiv.style.left = "0px";
this.previewDiv.style.top = "0px";
this.previewDiv.appendChild(this.img);
this.previewDiv.style.filter = "progid:DXImageTransform.Microsoft.Fade(duration=1)"; // 设置滤镜
this.onPageCss = "background:green;color:red;border:2px white solid;margin-left:1px;width:15px;height:15px;font-size:12px;text-align:center;display:inline;float:left;";
this.outPageCss = "background:black;color:white;border:2px white solid;margin-left:1px;width:15px;height:15px;font-size:12px;text-align:center;display:inline;float:left;";
this.pageDiv = document.createElement("div");
this.pageDiv.style.position = "absolute"; // 注意此处的定位属性必须为absolute
this.pageDiv.style.right = "0px";
this.pageDiv.style.bottom = "0px";
this.pages = [];
for (var i = 0; i < this.images.length; i++) {
var perPageDiv = document.createElement("div");
perPageDiv.innerHTML = i + 1;
perPageDiv.style.cssText = this.outPageCss;
this.pageDiv.appendChild(perPageDiv);
this.pages.push(perPageDiv);
}
this.container.appendChild(this.previewDiv);
this.container.appendChild(this.pageDiv);
addEventHandler(oThis.previewDiv, "mouseover", function() {oThis.stop();oThis.previewDiv.style.cursor = "hand";});
addEventHandler(oThis.previewDiv, "mouseout", function() {oThis.timer = setTimeout(function() {oThis.preview();}, oThis.options.time);});
each(this.pages, function(o, i) {
addEventHandler(o, "mouseover", function() {oThis.stop();oThis.count = i;oThis.preview();o.style.cursor = "hand";});
addEventHandler(o, "mouseout", function() {oThis.stop();oThis.timer = setTimeout(function() {oThis.preview();}, oThis.options.time);});
});
this.start();
},
setOptions : function(options) {
this.options = {
time : 2000
};
Object.extend(this.options, options || {});
},
preview : function() {
var iCount = this.count;
if (iCount >= this.images.length - 1) iCount = 0;
var iImage = this.images[iCount];
this.previewDiv.filters[0].Apply(); // 对图片应用滤镜
this.img.src = iImage.src;
this.previewDiv.filters[0].play(); // 播放滤镜效果
var pages = this.pages;
for (var j = 0; j < pages.length; j++) {
var page = pages[j];
if (j == iCount) {
page.style.cssText = this.onPageCss;
} else {
page.style.cssText = this.outPageCss;
}
}
this.count = iCount + 1;
var oThis = this;
this.timer = setTimeout(function() {oThis.preview();}, this.options.time);
},
start : function() {
this.preview();
},
stop : function() {
clearTimeout(this.timer);
}
};
//-->
</script>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-03-20
最后修改：2010-11-15
|
| 返回顶楼 | |
|
发表时间：2010-03-22
类似fancybox这样的才是图片预览插件吧。
|
| 返回顶楼 | |
|
发表时间：2010-03-22
只支持IE，看来还不太适用，需要修改一下。
|
| 返回顶楼 | |
|
发表时间：2010-03-23
giginet 写道 只支持IE，看来还不太适用，需要修改一下。
恩，只在IE7上做过测试... |
| 返回顶楼 | |
