鼠标滚动实现图片放大缩小[转]-白红宇

鼠标滚动实现图片放大缩小[转]

阅读量：4970 次

发布时间：2019-06-12

本文共 1522 字，大约阅读时间需要 5 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>无标题文档</title>

<!--

//图片按比例缩放,可输入参数设定初始大小

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 = "点击图片可在新窗口打开";

　　　　　　 }

//-->

</SCRIPT>

</head>

<body>

<div >

<div>

</body>

</html>

转载于:https://www.cnblogs.com/li-fei/p/3285691.html

你可能感兴趣的文章

Wannafly模拟赛5 A 思维 D 暴力

Javascript获取select下拉框选中的的值

查看>>

并发编程注意的问题

查看>>

angular--ngResource的简单使用

查看>>

android本地数据库，微信数据库WCDB for Android 使用实例

查看>>

如何快速三个月成为一个领域的高手的四个方法

查看>>

[51nod]1347 旋转字符串

查看>>

SpringBoot2.0 + SpringCloud Eureka搭建高可用注册中心（Eureka之三）

查看>>

tomcat文件夹与文件解析

查看>>

【Linux开发】CCS远程调试ARM，AM4378