图片点击放大功能

<img src="xxx.jpg" />
<script>
var flag = true,//状态true为正常的状态,false为放大的状态
imgH,//图片的高度
imgW,//图片的宽度
img = document.getElementsByTagName(‘img‘)[0];//图片元素
img.onclick = function(){
//图片点击事件
imgH = img.height; //获取图片的高度
imgW = img.width; //获取图片的宽度
if(flag){
//图片为正常状态,设置图片宽高为现在宽高的2倍
flag = false;//把状态设为放大状态
img.height = imgH*2;
img.width = imgW*2;
}else{
//图片为放大状态,设置图片宽高为现在宽高的二分之一
flag = true;//把状态设为正常状态
img.height = imgH/2;
img.width = imgW/2;
}

}

</script>

时间: 2024-10-13 03:53:51

图片点击放大功能的相关文章

图片点击放大

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #1d9421 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #1d9421 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; min-height: 21.0px } p.

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

SmoothImageDemo图片点击放大特效

SmoothImageDemo图片点击放大特效 图片点击有缩放动画效果,从图片本身的位置放大,缩小到图片的位置,不会截动态图... 下载地址:http://www.devstore.cn/code/info/646.html 运行截图:  

自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,但是天公不作美,公司需要让我自己开发个图片放大的插件 但公司老大的话,犹如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人只能瞎研究了,幸好黑天不负屌丝人,本屌丝终于搞出来了,虽然不尽善尽美,但是功能还是可以用的啦 先附上源码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg&q

js图片点击放大特效代码

原文:js图片点击放大特效代码 源代码下载:http://www.zuidaima.com/share/1550463485676544.htm 图片放大js代码实现,运行效果如下:

图片点击放大插件

最近因为需要找了个图片点击放大的插件,感觉还行吧~~ 底下给香瓜文件下载参考↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 如图: 接下来放香瓜代码: 主要用到下面的样式文件和js文件<link rel="stylesheet" href="css/viewer.min.css" /> <script type="text/javascript" src="js/viewer.min.js"

iOS 图片点击放大, 再次点击缩小

XWScanImage  是一个自定义的类, 评论留Q 发 ImageView = [[UIImageView alloc]init]; ImageView.backgroundColor = SetColor(160, 160, 160); //为UIImageView1添加点击事件 UITapGestureRecognizer *tapGestureRecognizer1 = [[UITapGestureRecognizer alloc] initWithTarget:self action

图片点击放大效果

<title>点击放大图片</title><!--方法一--> <img src="/jscss/demoimg/wall.jpg" onclick="this.width+=50;this.height+=50"> <!--方法二--> <img src="/jscss/demoimg/wall.jpg" onclick="this.style.zoom='2'&quo

微信企业号办公系统-图片预览放大功能-previewImage

在微信里看过文章的应该知道,文章里的图片点击后可以放大.分享和保存. 然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调用. previewImage是微信客户端给内置浏览器增加的一个Javascript Interface,通过调用这个API,可以调起微信客户端提供的大图片查看组件. 官方说明和例子: wx.previewImage({ current: '', // 当前显示图片的http链接 urls: []