zoukankan
html css js c++ java
<转>javascript实现图片的等比缩放
function
resizeimg(ImgD,iwidth,iheight)
{
var
image
=
new
Image();
image.src
=
ImgD.src;
if
(image.width
>
0
&&
image.height
>
0
)
{
if
(image.width
/
image.height
>=
iwidth
/
iheight)
{
if
(image.width
>
iwidth)
{
ImgD.width
=
iwidth;
ImgD.height
=
(image.height
*
iwidth)
/
image.width;
}
else
{
ImgD.width
=
image.width;
ImgD.height
=
image.height;
}
ImgD.alt
=
image.width
+
"
×
"
+
image.height;
}
else
{
if
(image.height
>
iheight)
{
ImgD.height
=
iheight;
ImgD.width
=
(image.width
*
iheight)
/
image.height;
}
else
{
ImgD.width
=
image.width;
ImgD.height
=
image.height;
}
ImgD.alt
=
image.width
+
"
×
"
+
image.height;
}
ImgD.style.cursor
=
"
pointer
"
;
//
改变鼠标指针
ImgD.onclick
=
function
()
{ window.open(
this
.src);}
//
点击打开大图片
if
(navigator.userAgent.toLowerCase().indexOf(
"
ie
"
)
>
-
1
)
{
//
判断浏览器,如果是IE
ImgD.title
=
"
请使用鼠标滚轮缩放图片,点击图片可在新窗口打开
"
;
ImgD.onmousewheel
=
function
img_zoom()
//
滚轮缩放
{
var
zoom
=
parseInt(
this
.style.zoom,
10
)
||
100
;
zoom
+=
event.wheelDelta
/
12
;
if
(zoom
>
0
)
this
.style.zoom
=
zoom
+
"
%
"
;
return
false
;
}
}
else
{
//
如果不是IE
ImgD.title
=
"
点击图片可在新窗口打开
"
;
}
}
}
在需要实现等比缩放的图片上加上onload语句,图片装载时初始化大小。
具体实现代码如下:
<
img
name
=""
src
=""
onload
="javascript:resizeimg(this,100,200)"
>
查看全文
相关阅读:
leetcode-----5. 最长回文子串
leetcode-----4. 寻找两个正序数组的中位数
leetcode-----3. 无重复字符的最长子串
leetcode-----2. 两数相加
leetcode-----1. 两数之和
leetcode-----第 26 场双周赛
leetcode-----104. 二叉树的最大深度
leetcode-----103. 二叉树的锯齿形层次遍历
leetcode-----102. 二叉树的层序遍历
数据管理必看!Kendo UI for jQuery过滤器的全球化
原文地址:https://www.cnblogs.com/symbol441/p/979136.html
最新文章
JS+CSS
CSS
Vue
JS
JS
Vue
英语语法
英语学习
英语
node
热门文章
RocketMQ事务性消息及持久化
RocketMQ源码 — 十一、 RocketMQ事务消息
RocketMQ源码 — 十、 RocketMQ顺序消息
RocketMQ源码 — 九、 RocketMQ延时消息
RocketMQ源码 — 八、 RocketMQ消息重试
RocketMQ源码 — 七、 RocketMQ高可用(2)
RocketMQ源码 — 六、 RocketMQ高可用(1)
消息队列面试题要点
SpringBoot异步调用方法遇到的问题
leetcode-----6. Z 字形变换
Copyright © 2011-2022 走看看