社区
ASP
帖子详情
自动缩放大图之后的显示问题
GAMESOUL
2005-10-27 09:52:34
我用JS脚本对图做了按高或按宽自动缩放
如果图小,看不出有什么问题
但图大的话脚本就执行失败了
脚本打开网页就执行了,图却还在预载。。。最终图片显示失败
有什么解决办法吗?
延时的办法不能根本的解决问题
请教其它更好的办法
代码请用JS或ASP
...全文
131
8
打赏
收藏
自动缩放大图之后的显示问题
我用JS脚本对图做了按高或按宽自动缩放 如果图小,看不出有什么问题 但图大的话脚本就执行失败了 脚本打开网页就执行了,图却还在预载。。。最终图片显示失败 有什么解决办法吗? 延时的办法不能根本的解决问题 请教其它更好的办法 代码请用JS或ASP
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
8 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
GAMESOUL
2005-10-28
打赏
举报
回复
感谢楼上的发贴..但我要的不是图片浏览器
fantiny
2005-10-27
打赏
举报
回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Document </TITLE>
<style type="text/css">
body{
margin : 0px;
background-color : #999999 ;
}
.DivMain {
position : absolute ;
text-align : center ;
overflow : hidden ;
}
.DivMenu {
position : absolute ;
text-align : left ;
overflow : hidden ;
visibility : hidden ;
}
.ImgMain {
position : absolute ;
overflow : hidden ;
border : 0px ;
}
.TBMain {
background-color : #CCCCCC ;
padding : 0px ;
border : 0px ;
z-index : 99 ;
line-height : 18px ;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var originalWidth;
var originalHeight;
var ObjDrag;
function setInit(objImg) {
originalWidth = objImg.width;
originalHeight = objImg.height;
objImg.style.width = originalWidth;
objImg.style.height = originalHeight;
fmImgZoom.FitScreen.click();
}
function setOriginal() {
var objImg;
var objDivMain ;
var intBodyWidth ;
var intBodyHeight ;
intBodyWidth = document.body.clientWidth ;
intBodyHeight = document.body.clientHeight ;
objImg = document.getElementById("imgMain") ;
objDivMain = document.getElementById("divMain") ;
objImg.style.left = 0 ;
objImg.style.top = 0 ;
objImg.style.width = originalWidth;
objImg.style.height = originalHeight;
objImg.style.zoom = 1 ;
objDivMain.style.width = intBodyWidth ;
objDivMain.style.height = intBodyHeight - 20 ;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
}
function initImg(objCurrent) {
var intBodyWidth ;
var intBodyHeight ;
var objTbMain ;
var objDivMain ;
intBodyWidth = document.body.clientWidth ;
intBodyHeight = document.body.clientHeight ;
objTbMain = document.getElementById("tbMain") ;
objDivMain = document.getElementById("divMain") ;
objTbMain.style.top = 0;
objTbMain.style.height = 20;
objTbMain.style.width = intBodyWidth;
objDivMain.style.left = 0 ;
objDivMain.style.height = intBodyHeight - 20 ;
objDivMain.style.width = intBodyWidth ;
initZoom(objCurrent);
}
function initZoom(obj){
var intObjWidth ;
var intObjHeight ;
var intDivHeight ;
var intZoomRatio ;
var objDivMain ;
var objTbMain;
objDivMain = document.getElementById("DivMain");
objTbMain = document.getElementById("tbMain") ;
intDivHeight = objDivMain.style.pixelHeight;
intObjHeight = obj.style.pixelHeight;
intZoomRatio = intDivHeight / intObjHeight;
obj.style.zoom = intZoomRatio ;
obj.style.top = 0;
obj.style.left = 0;
fnWritePos (obj.style.left,obj.style.top,obj.style.zoom) ;
}
function setFitScreen() {
var objImg;
objImg = document.getElementById("imgMain") ;
initImg(objImg);
}
function fnMouseDown(obj) {
ObjDrag=obj;
ObjDrag.setCapture();
ObjDrag.l=event.x-ObjDrag.style.pixelLeft;
ObjDrag.t=event.y-ObjDrag.style.pixelTop;
}
function fnMouseMove() {
if(ObjDrag!=null) {
var objDivMain;
objDivMain = document.getElementById("DivMain") ;
if( event.x - ObjDrag.l >= objDivMain.style.pixelLeft){
ObjDrag.style.left = event.x-ObjDrag.l;
}
else{
ObjDrag.style.left = objDivMain.style.pixelLeft;
}
if( event.y - ObjDrag.t >= objDivMain.style.pixelTop){
ObjDrag.style.top = event.y-ObjDrag.t;
}
else{
ObjDrag.style.top = objDivMain.style.pixelTop;
}
fnWritePos(ObjDrag.style.left,ObjDrag.style.top,ObjDrag.style.zoom);
}
}
function fnMouseUp() {
if(ObjDrag!=null) {
ObjDrag.releaseCapture();
ObjDrag=null;
}
}
function fnZoomIn() {
var objImg;
objImg = document.getElementById("imgMain") ;
objImg.style.zoom = parseFloat(objImg.style.zoom) + 0.01 ;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
}
function fnZoomOut() {
var objImg;
objImg = document.getElementById("imgMain") ;
if(objImg.style.zoom>0.01){
objImg.style.zoom = parseFloat(objImg.style.zoom) - 0.01 ;
fnWritePos(objImg.style.left,objImg.style.top,objImg.style.zoom);
}
}
function fnDivMouseDown() {
if ( event.button == 2 && event.srcElement.id != "imgMain") {
setOriginal();
}
}
function fnWritePos(intLeft,intTop,intZoom) {
var objbtnImgInfo;
objbtnImgInfo = document.getElementById("btnImgInfo") ;
objbtnImgInfo.innerText = " ImgLeft:" + intLeft + " ImgTop:" + intTop + " ImgZoom:" + intZoom ;
}
function setDisplay() {
var objImg;
objImg = document.getElementById("imgMain") ;
if(objImg.style.visibility == ""){
objImg.style.visibility = "hidden";
}
else{
objImg.style.visibility = "";
}
}
function fnContextMenu() {
window.event.returnValue=false;
}
//-->
</SCRIPT>
</HEAD>
<BODY oncontextmenu="fnContextMenu()">
<form name="fmImgZoom">
<TABLE id="tbMain" class="TBMain">
<TR>
<TD height="20">
<input type="button" name="ZoomIn" value="ZoomIn" onclick="fnZoomIn()">
<input type="button" name="ZoomOut" value="ZoomOut" onclick="fnZoomOut()">
<input type="button" name="Original" value="Original" onclick="setOriginal()">
<input type="button" name="FitScreen" value="FitScreen" onclick="setFitScreen()">
<input type="button" name="BtnHidden" value="hide/view" onclick="setDisplay()">
<input id="btnImgInfo" size="50">
</TD>
</TR>
</TABLE>
<div id="divMain" class="DivMain" onmousedown="fnDivMouseDown()"><img src="22.jpg" id="imgMain" class="imgMain" onload="setInit(this)" onmousedown="fnMouseDown(this)" onmousemove="fnMouseMove()" onmouseup="fnMouseUp()" ></div>
</form>
</BODY>
</HTML>
jingxiaoping
2005-10-27
打赏
举报
回复
我对JS是个盲童,所以只能做到现在这个水平了。
GAMESOUL
2005-10-27
打赏
举报
回复
期待更好的办法。。。。呵呵
另外请教一下。。关于预读图片的脚本
能不能判断图是否已预读完?
GAMESOUL
2005-10-27
打赏
举报
回复
测试成功,有点小BUG。。。有时无法显示图片。。。
一页显示9张图。。偶尔会有一二两不会显示
jingxiaoping
2005-10-27
打赏
举报
回复
onload="RatImg(this,400,380)"
记住上面里面的400,300对应的是你想要修改后的长度(会自动调整宽度)和宽度(会自动调整长度)。
GAMESOUL
2005-10-27
打赏
举报
回复
呵呵,谢谢答复,我测试一下
预载的过程可以让它不显示出来的 display:none 就行了
这样可以不考虑延时了
jingxiaoping
2005-10-27
打赏
举报
回复
这是我写的JS脚本,已经通过测试
<script language="javascript">
function RatImg(Img,blw,blh)
{
var i=Img.width;
var j=Img.height;
if (i>blw)
{
var zjbl1=blw/i;
var zjbl2=blh/j;
if (zjbl1<zjbl2)
{
zjbl=zjbl1;
}
else
{
zjbl=zjbl2;
}
i=i*zjbl;
j=j*zjbl;
}
else
{
if (j>blh)
{
zjbl=blh/j;
j=blh;
i=i*zjbl;
}
}
Img.width=i;
Img.height=j;
}
</script>
使用方法在<img标签内加上 onload="RatImg(this,400,380)" id="img"即可实现在加载的时候自动缩放(不过还是建议有些延时比较好,因为有可能刚开始图片很大,然后再变小。
ASP
28,391
社区成员
357,059
社区内容
发帖
与我相关
我的任务
ASP
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
复制链接
扫一扫
分享
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章