JS滚轮控制图片缩放大小和拖动的实例代码
程序员文章站
2023-02-09 08:23:08
具体代码如下所示：
具体代码如下所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style>
.dragable {
position: relative;
cursor: move;
}
.img-con {
position: relative;
width: 713px;
height: 455px;
overflow: hidden;
border: 1px solid red;
}
</style>
</head>
<body>
<p class="img-con"><img src="http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg" class="dragable" /></p>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var oimg = document.getelementsbytagname("img")[0];
function fnwheel(obj, fncc) {
obj.onmousewheel = fn;
if (obj.addeventlistener) {
obj.addeventlistener('dommousescroll', fn, false);
}
function fn(ev) {
var oevent = ev || window.event;
var down = true;
if (oevent.detail) {
down = oevent.detail > 0
} else {
down = oevent.wheeldelta < 0
}
if (fncc) {
fncc.call(this, down, oevent);
}
if (oevent.preventdefault) {
oevent.preventdefault();
}
return false;
}
};
fnwheel(oimg, function(down, oevent) {
var oldwidth = this.offsetwidth;
var oldheight = this.offsetheight;
var oldleft = this.offsetleft;
var oldtop = this.offsettop;
var scalex = (oevent.clientx - oldleft) / oldwidth; //比例
var scaley = (oevent.clienty - oldtop) / oldheight;
if (down) {
this.style.width = this.offsetwidth * 0.9 + "px";
this.style.height = this.offsetheight * 0.9 + "px";
} else {
this.style.width = this.offsetwidth * 1.1 + "px";
this.style.height = this.offsetheight * 1.1 + "px";
}
var newwidth = this.offsetwidth;
var newheight = this.offsetheight;
this.style.left = oldleft - scalex * (newwidth - oldwidth) + "px";
this.style.top = oldtop - scaley * (newheight - oldheight) + "px";
});
}
<!--
//拖拽
var ie = document.all;
var nn6 = document.getelementbyidx && !document.all;
var isdrag = false;
var y, x;
var odragobj;
function movemouse(e) {
if (isdrag) {
odragobj.style.top = (nn6 ? nty + e.clienty - y : nty + event.clienty - y) + "px";
odragobj.style.left = (nn6 ? ntx + e.clientx - x : ntx + event.clientx - x) + "px";
return false;
}
}
function initdrag(e) {
var odraghandle = nn6 ? e.target : event.srcelement;
var topelement = "html";
while (odraghandle.tagname != topelement && odraghandle.classname != "dragable") {
odraghandle = nn6 ? odraghandle.parentnode : odraghandle.parentelement;
}
if (odraghandle.classname == "dragable") {
isdrag = true;
odragobj = odraghandle;
nty = parseint(odragobj.style.top + 0);
y = nn6 ? e.clienty : event.clienty;
ntx = parseint(odragobj.style.left + 0);
x = nn6 ? e.clientx : event.clientx;
document.onmousemove = movemouse;
return false;
}
}
document.onmousedown = initdrag;
document.onmouseup = new function("isdrag=false");
</script>
</body>
</html>
只缩放
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<img border="0" src="http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg" onmousewheel="return rollimg(this)">
</body>
<script language="javascript">
function rollimg(o){
/* 获取当前页面的缩放比
若未设置zoom缩放比，则为默认100%，即1，原图大小
*/
var zoom=parseint(o.style.zoom)||100;
/* event.wheeldelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom
wheeldelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
*/
zoom+=event.wheeldelta/12;
/* 如果缩放比大于0，则将缩放比加载到页面元素 */
if (zoom>0) o.style.zoom=zoom+'%';
/* 如果缩放比不大于0，则返回false，不执行操作 */
return false;
}
</script>
</html>
总结
以上所述是小编给大家介绍的js滚轮控制图片缩放大小和拖动的实例代码，希望对大家有所帮助
下一篇： Angular刷新当前页面的实现方法