在html上点击一张图片时放大照片,网页中图片自动缩小，点击放大（以防页面被撑大）的方法...

我们在开发动态网站的时候，一般都会在后台让用户添加文章，在添加文章的过程中难免用户会添加一些大的图片，这样，在前台显示的时候图片就会把页面撑的很大，很难看，今天就教大家利用JavaScript函数来实现网页中图片自动缩小，点击图片放大的方法。

1、将以下js代码保存到你的网页文件夹中，这里假设文件名为htmer_img.jsfunction ResizeImage(objImage,maxWidth){

try{

if(maxWidth>0){

if(objImage.width>maxWidth){

objImage.width=maxWidth;

if (window.attachEvent)

{objImage.attachEvent('onclick', function(){try{window.open(objImage.src);}catch(e){window.open(objImage.src);}});

objImage.attachEvent('onmouseover', function(){objImage.style.cursor='pointer';});

}

if (window.addEventListener)

{objImage.addEventListener('click', function(){try{window.open(objImage.src);}catch(e){window.open(objImage.src);}},false);

objImage.addEventListener('mouseover', function(){objImage.style.cursor='pointer';},false);

}

}catch(e){};

}

2、在前台显示页面中的

和之间加入如下代码

3、在调用图片的地方加入onload属性，具体代码如下

在html上点击一张图片时放大照片,网页中图片自动缩小，点击放大（以防页面被撑大）的方法...相关推荐

andoid点击按钮(ImageButton)时改变按钮的背景图片 SelectorDemo
andoid点击按钮(ImageButton)时改变按钮的背景图片 SelectorDemo 博客分类: android android selector 改变按钮背景图片主要是用到selector ...
HTML中img标签的src属性为绝对路径时，在IE中图片可显示，在firefox中不行
HTML中img标签的src属性为绝对路径时,在IE中图片可显示,在firefox中不行下图,src中为图片的绝对路径,此时在IE浏览器中图片可显示出来,firefox浏览器中图片不能显示出来代码 ...
html多选框放在图片上,网页中图片格式问题地总结.doc
网页中图片格式问题地总结 HYPERLINK "file:///C:\\Users\\Administrator\\Desktop\\图片格式与设计那点事儿%20-%20TaobaoUED_ ...
word中图片为嵌入式格式时显示不全_word中图片设置嵌入式后无法显示完整的解决方案(转)...
word中图片的格式和文字段落的格式有这很密切的联系在使用word 中,您要记住一点,如果您要使得您插入的图片样式为嵌入式,那么在文字的段落设置中选哪个行距都可以,但惟独不能选择固定行距,下面分别演 ...
iostext添加点击事件_iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件以前老师讲过类似的功能,自己懒得回头看了,找了很多第三方的,感觉这个小巧便利,作者只是扩展了分类,实现起来代码也少.先来个效果图自己的项目,直接上代码 - (void ...
自动设置图片的序号_编写学位论文时如何给表格和图片自动编号
引言最近和论文格式的检测系统斗智斗勇,可以说是摸清了系统的脾气并且能够把错误数控制在0.其中,论文正文的表格和图片自动编号的问题还是挺有意思的,特此记录一下. 需求对于表格,系统要求表格题注处于表 ...
Mac上执行命令“brew install *”时需谨慎，警惕homebrew自动更新python3.7导致第三方模块被格式化
问题描述: 准备通过pip3 install pyenchant安装PyEnchant模块,实现识别输入字符串是否为有效英文单词的功能.结果安装后执行如下测试脚本报错ImportError : The ...
transferto()方法，是springmvc封装的方法，用于图片上传时，把内存中图片写入磁盘
//上传图片//1图片存储的路径String pic_path="";//2原名称String originalFilename = items_pic.getOriginalFi ...
h5 img js 点击图片放大_网页对应图片点击放大 html+js
$(function() { $('img').click(function() { var _this = $(this);// 将当前的pimg元素作为_this传入函数 imgShow(&quo ...

在html上点击一张图片时放大照片,网页中图片自动缩小，点击放大（以防页面被撑大）的方法...

在html上点击一张图片时放大照片,网页中图片自动缩小，点击放大（以防页面被撑大）的方法...相关推荐

最新文章

热门文章