论坛徽章:: 0

电梯直达

1楼 [收藏(0)] [报告]

发表于 2007-08-24 10:11 |只看该作者 |倒序浏览

转载地址: [url]http://www.hoojar.com/view-lore.php?lid=52723[/url] WEB 图片查阅器
WEB 图片查阅器
功能: 根据图片大小自动缩放展示,在弹出的窗体中按屏幕的大小自动算出要显示的位置,显示窗体的位置通常是居中显示的,
些控件相常有用,用来查看WEB方式的图片最佳.
使用方法:只需要在你的网页中加载<script language="javascript" src="zoom.js"></script>,并在要设置的查阅的图片处
设置:onclick="ShowPic('', this)" onload="if(this.width>screen.width-100)this.width=screen.width-100;" onmousewheel="zoomimg(this)"
例:<img src="http://www.hoojar.com/images/logo.gif" border="0" onclick="ShowPic('', this)" onload="if(this.width>screen.width-100)this.width=screen.width-100;" onmousewheel="zoomimg(this)" />
查看此图片只须点击原来的图片就可弹出WEB图片查阅器,在IE用户使用鼠标轮子还能达到缩放的最佳效果.
若您还不明白,您看[url]http://www.hoojar.com/[/url]网站上的例子即可.
<html>
<head>
<title>View photos</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" src="./zoom.js"></script>
</head>
<body leftmargin="0" topmargin="0" onload="InitSize()" ondblclick="window.close()" onclick="InitSize()">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr align="center">
<td>
<script language="javascript">
<!--
var url = self.location.href;
url = CleftValue(url);
document.write("<img src=\"" + url + "\" id=\"pic\" onload=\"if(this.width>screen.width)this.width=screen.width;if(this.height>screen.height)this.height=screen.height;\" onmousewheel=\"zoomimg(this)\">");
//-->
</script>
</td>
</tr>
</table>
</body>
</html>
<!--
///////////////////////////////////////////////////////////////////////////////
//
// 张树林 - 慧佳工作室
//
// Module Name: zoom.js
// Abstract: 用于WEB图片查阅器
// Version: 1.0
// Date 2007-06-11
// Author: woods·zhang
// Email: [email]hoojar@163.com[/email]
// MSN: [email]hoojar@hotmail.com[/email]
// Copyright 2001-2006, Hoojar studio All Rights Reserved
//
// 版权 2001-2006，慧佳工作室所有版权保护
//The software for free software, allowing use, copy,
//modify and distribute the software and files. Any
//use of this software must place a copy of all the
//above copyright notice. By the software Huijia studio
//maintenance, if you have any queries please contact us.
//Thank you.
//
//此软件为自由软件，允许使用、拷贝、修改、分发本软件及其文档。
//任何使用此软件的地方都得出现以上版权通告所有副本。此软件由
//慧佳工作室维护，如果您有什么疑问请与我们联系。谢谢使用。
//
///////////////////////////////////////////////////////////////////////////////
var NeedWidht = 400;
var NeedHeight = 300;
var scrwi = screen.width;
var scrhe = screen.height;
var woods = "";
function ShowPic(url, ob)
{
if (scrwi <= 800)
{
woods = "fullscreen=yes,resizable=no";
}
else
{
var left = (scrwi - NeedWidht)/2;
var top = (scrhe - NeedHeight)/2 ;
woods = "left="+ left +",top=" + top + ",width=" + NeedWidht + ",height=" + NeedHeight + ",fullscreen=no,status=no,resizable=yes,scrollbars=no,dialog=yes,modal=yes" ;
}
var url = url + "/js/look-pic.html?" + ob.src.replace("s_", "");
var dwin = window.open(url, "lookpic", woods);
dwin.focus();
}
function zoomimg(pic)//放大与缩小图片
{
var zoom=parseInt(pic.style.zoom,10)||100;
zoom+=event.wheelDelta/12;
if (zoom>0) pic.style.zoom=zoom+'%';
return false;
}
function ResizePic()
{
var pic = document.getElementById("pic");
pic.style.width = document.body.clientWidth;
pic.style.height = document.body.clientHeight;
pic.style.zoom = "100%";
}
function InitSize()
{
var pic = document.getElementById("pic");
pic.style.zoom = "100%";
NeedWidht = pic.width;
NeedHeight = pic.height;
var left = (scrwi - NeedWidht) / 2;
var top = (scrhe - NeedHeight) / 2 ;
window.moveTo(left,top);
window.resizeTo(pic.width + 6, pic.height + 50);
pic.style.zoom = "100%";
}
function CleftValue(url)//分解url?后的值
{
url = url.substring(url.indexOf("?") + 1, url.length);
return url;
}
//-->
转载地址: [url]http://www.hoojar.com/view-lore.php?lid=52723[/url] WEB 图片查阅器

复制代码

文库|博客

返回列表

Chinaunix › 论坛 › 程序设计 › Web开发 › WEB 图片查阅器 HTML版

WEB 图片查阅器 HTML版 [复制链接]