zoukankan
html css js c++ java
自适应图片大小的弹出窗口(3 中方法)
方法一
在最近的项目中,遇到一个问题,要实现这样的效果:
点pic_small.Aspx页面的缩略图后弹出pic_all.aspx页面,pic_all.aspx页面的大小要根据图片大小自动调整,而且要有图片的说明信息,还可以点上一幅和下一幅等进行翻页。
实现过程如下:
pic_small.Aspx页面缩略图处的代码为:
<
IMG
id
="imgPic"
style
="CURSOR: hand"
border
=0
height
="95"
onclick
="ShowWindow(<%#DataBinder.Eval(Container.DataItem,"
ID")%
>
)" src='
<%
#
"
Images/Product/
"
+
DataBinder.Eval(Container.DataItem,
"
PicUrl
"
)
%>
' width="118" runat="server">
ShowWindow保存在OpenWindows.js文件中,内容如下:
function ShowWindow(id)
{
window.open('pic_all.aspx?ID=' + id,'_blank','Scrollbars=no');
}
以下代码即可实现点缩略图后弹出页面pic_all.aspx显示图片信息,下面要实现的是pic_all.aspx页面根据图片的大小自动调整。
把以下代码放在pic_all.aspx页面的
<
Head
></
Head
>
之间:
<
script
>
function
window.onload()
{
var
obj
=
document.getElementById(
"
PicUrl
"
);
window.resizeTo(obj.offsetWidth
+
127
,obj.offsetHeight
+
75
);
}
</
script
>
这里的PicUrl是页面pic_all.aspx中用来显示原图大小的,我用的是html控件,无论你用什么方法,反正就是要从数据库中读出图片的名称或是路径了。
obj.offsetWidth 得到的就是显示出来的原图的宽了,obj.offsetWidth + 127表示窗口在图片的宽度基础上再大127像素,因为要留一些空间用来实现图片的说明信息。
这样就可以实现弹出来的窗口既可以根据图片大小自动调整,而且又可以随意编辑弹出来的页面,因为弹出来的页面是一个指定页面,无论要编辑什么,都可以和平时处理页面一样处理了。
方法二
当我提供给浏览者多张图片时,往往是先提供一组缩略图,当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。如何做出为种效果呢?肯定是用弹出窗口!由于有时图片不是一样大,在弹出图片窗口时可能出现空白,影响效果。若一个窗口一个窗口按图片大小作调整,实大太麻烦了。本文提供的这种弹出窗口,可以使你一劳永益,它会根据图片的在小自动调整窗口的大小。请看下面的制作方法:
1、 先用以下HTML代码创建一个图像的空链接: 本例缩略图放在images目录下,文件名为img0003s.jpg;原图也放在images目录下,文件名为img0003.jpg,创建好的空链接代码如下:
<
a
href
="#"
><
img
src
="images/img0003s.jpg"
></
a
>
其中
<
a
>
标记的href属性指定为“#”即为空链接;
<
img
>
标记的src属性指定缩略图的URL。
2、在网页代码
<
head
>
与
</
head
>
之间加上如下的代码:
<
script
>
function
newimg(imgurl)
{
newwin
=
window.open('about:blank','','width
=
10
,height
=
10
');
//
先新打开一个小窗口
newwin.document.write('
<
body leftmargin
=
0
topmargin
=
0
><
img id
=
img1 src
=
'
+
imgurl
+
' onload
=
"
self.resizeTo(this.offsetWidth,this.offsetHeight);
"
>
');
//
把窗口的大小调整到与图片一样大。
}
</
script
>
3、在缩略图空链接的代码中加上onclick="newimg('在这里写上原图的Ulr')",最后的缩略图空链接代码如下:
<
a
href
="#"
onclick
="newimg('images/img0003.jpg')"
><
img
src
="images/img0003s.jpg"
></
a
>
到此已OK了,若有多张图片,重复上述1~3步就行了。
本方法的原理是利用空链接弹出一个小窗口,把图片加入,然后让窗口根据图片的大小来调整窗口的在小。
方法三
很多时候我们需要提供这样的功能给访问者:当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。
实现此功能的最简单作法是用以下HTML代码创建一个图像链接:
<
a
href
="fullsize.jpg"
target
="_blank"
><
img
src
="small.jpg"
></
a
>
其中
<
a
>
标记的href属性指定全尺寸图片的URL,target属性设置为_blank指定在新窗口中显示该图片;
<
img
>
标记的src属性指定缩略图的URL。
如果我们想对显示全尺寸图片的窗口的外观进行某些控制(比如希望弹出窗口的高度、宽度能与全尺寸图片的大小匹配时),则可调用 window.open 方法,该方法接收三个参数,分别指定要打开文件的URL,窗口名及窗口特性,在窗口特性参数中可指定窗口的高度、宽度,是否显示菜单栏、工具栏等。以下代码将显示全尺寸图片在一个没有工具栏、地址栏、状态栏、菜单栏,宽、高分别为400、350的窗口中:
<
a
href
="fullsize.jpg"
onClick
="window.open(this.href,'', 'height=350,width=400,toolbar=no,location=no,status=no,menubar=no');return false"
><
img
src
="small.jpg"
></
a
>
这里就提出了个问题,如果所有全尺寸图片都具有统一的大小(比如都是400x350),那么以上代码适用于所有的缩略图片链接(只是href属性指向的全尺寸图片文件不同)。但如果全尺寸图片的大小并不统一,还用以上代码则我们需要先取得每幅全尺寸图片的大小,然后在window.open方法的窗口特性参数中一一设置height和width为正确的值,在图片数量较多的情况下,这显然效率太低了。那么是否有一劳永逸的方法,即让弹出窗口能自动适应要显示图片的大小?通过研究,发现可以使用 DHTML 中的 Image 对象来达到我们的目的,Image 对象可动态装载指定的图片,通过读取其 width 和 height 属性即能获得装入图片的大小,以此来设置弹出窗口的大小,即可实现自适应图片大小的弹出窗口了。下面即是实现代码:
<
script
language
="javascript"
type
="text/javascript"
>
<!--
var
imgObj;
function
checkImg(theURL,winName)
{
//
对象是否已创建
if
(
typeof
(imgObj)
==
"
object
"
)
{
//
是否已取得了图像的高度和宽度
if
((imgObj.width
!=
0
)
&&
(imgObj.height
!=
0
))
//
根据取得的图像高度和宽度设置弹出窗口的高度与宽度,并打开该窗口
//
其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量
OpenFullSizeWindow(theURL,winName,
"
,width=
"
+
(imgObj.width
+
20
)
+
"
,height=
"
+
(imgObj.height
+
30
));
else
//
因为通过 Image 对象动态装载图片,不可能立即得到图片的宽度和高度,所以每隔100毫秒重复调用检查
setTimeout(
"
checkImg('
"
+
theURL
+
"
','
"
+
winName
+
"
')
"
,
100
)
}
}
function
OpenFullSizeWindow(theURL,winName,features)
{
var
aNewWin, sBaseCmd;
//
弹出窗口外观参数
sBaseCmd
=
"
toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,
"
;
//
调用是否来自 checkImg
if
(features
==
null
||
features
==
""
)
{
//
创建图像对象
imgObj
=
new
Image();
//
设置图像源
imgObj.src
=
theURL;
//
开始获取图像大小
checkImg(theURL, winName)
}
else
{
//
打开窗口
aNewWin
=
window.open(theURL,winName, sBaseCmd
+
features);
//
聚焦窗口
aNewWin.focus();
}
}
//
-->
</
script
>
使用时将上面的代码放在网页文档的
<
head
></
head
>
标记对中,然后在链接的点击事件中调用OpenFullSizeWindow函数,如
<
a
href
="fullsize.jpg"
onClick
="OpenFullSizeWindow(this.href,'','');return false"
><
img
src
="small.jpg"
></
a
>
即可。
查看全文
相关阅读:
centos
ssh 登录 centos 服务器
Sql NoSql
Java
PHP
React Hooks使用
前端优化tips
Error:Node Sass version 5.0.0 is incompatible with ^4.x 解决
css换行
git 关联多个远程仓库
原文地址:https://www.cnblogs.com/yongheng178/p/1274321.html
最新文章
React 进阶提高
react 基础实践篇-小型财务系统(10 个视频)
安装 docker (一)
[分享] 最流行的 10 个 JavaScript 库
诱人的 react 视频教程-基础篇(14 个视频)
80口被占用,如何解除
jQuery 遍历
正则表达式入门学习
dreamweaver批量去除空格,空行
javascript跨域获取json数据
热门文章
CSS的伪元素
CSS的伪类和伪元素
CSS的定位
CSS选择器
动态申请内存和释放
Mysql
centos 编译安装 elasticsearch
centos redis
其他
centos 编译安装 mysql
Copyright © 2011-2022 走看看