<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标控制图片放大缩小</title>
<script type="text/javascript">
window.onload=function(){
var display = document.getElementById('display');
var _wheelDelta=0,upcheck=-1;
addScrollListener(display,wheelHandle);
}
function addScrollListener(element, wheelHandle) {
if(typeof element != 'object') return;
if(typeof wheelHandle != 'function') return;
// 监测浏览器
if(typeof arguments.callee.browser == 'undefined') {
var user = navigator.userAgent;
var b = {};
b.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object";
b.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !b.opera;
b.ie = user.indexOf("MSIE") > -1 && !b.opera;
b.gecko = user.indexOf("Gecko") > -1 && !b.khtml;
arguments.callee.browser = b;
}
if(element == window)
element = document;
if(arguments.callee.browser.ie)
element.attachEvent('onmousewheel', wheelHandle);
else
element.addEventListener(arguments.callee.browser.gecko ? 'DOMMouseScroll' : 'mousewheel', wheelHandle, false);
}
function getStyleValue(objname,stylename){
if(objname.currentStyle){
return objname.currentStyle[stylename]
}else if(window.getComputedStyle){
stylename = stylename.replace(/([A-Z])/g, "-$1").toLowerCase();
return window.getComputedStyle(objname, null).getPropertyValue(stylename);
//return window.getComputedStyle(objname , null)[stylename];
}
}
function wheelHandle(e) {
if(e.wheelDelta) {
//document.getElementById('display').innerHTML = (e.wheelDelta > 0 ? '上' : '下');
upcheck = e.wheelDelta >0 ? 1 : 0;
//_wheelDelta += e.wheelDelta/(-40);
} else {
//alert(e.detail);
upcheck = e.detail <0 ? 1 : 0;
//_wheelDelta +=e.detail;
}
showimg();
}
function showimg(){
var tmpobj = document.getElementById("showimg");
var width = parseInt(getStyleValue(tmpobj,'width'));
var height = parseInt(getStyleValue(tmpobj,'height'));
var i = width/height;// alert(i);
//alert( width + ' ' + height);
/*if(_wheelDelta<0){
if(width>=0){
tmpobj.style.height = (width + _wheelDelta*10) + 'px';
tmpobj.style.width = (height + _wheelDelta*10*i) + 'px';
}
}else{
if(width<=1024){
tmpobj.style.height = (width - _wheelDelta*10) + 'px';
tmpobj.style.width = (height - _wheelDelta*10*i) + 'px';
}
}*/
if(upcheck){
if(width<=1024){
tmpobj.style.height = (height + 30) + 'px';
tmpobj.style.width = (width + 30*i) + 'px';
}
}else{
if(width>=35){
tmpobj.style.height = (height - 30) + 'px';
tmpobj.style.width = (width - 30*i) + 'px';
}
}
}
/*var scrollfunc = function(event) {
var direct = 0;
if (event.wheelDelta) {
alert(wheelDelta);
//direct = event.wheelDelta > 0 ? 1 : -1;
} else if (event.detail) {
alert(event.detail);
//direct = event.detail < 0 ? 1 : -1;
}
};
Event.observe(document, 'mousewheel', scrollfunc);
Event.observe(document, 'DOMMouseScroll', scrollfunc);*/ //firefox
</script>
<style type="text/css">
*{padding:0;margin:0;}
img{border:none;}
#display{max-width:400px;max-height:512px;margin:30px auto;overflow:scroll;}
</style>
</head>
<body>
<div id="display"><img src="tupian.jpg" id="showimg" width="390" height="500" style="display:block;margin:auto;" /></div>
</body>
</html>
分享到:
相关推荐
js实现图片在div内滚轮放大缩小拖动,有滚动条,双击回原状,无插件,赠送网上搜罗的其他的一些图片放大缩小文件,在每个压缩包是一个,打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里,记事本打开...
div滚动条 带滚动条的div div滚动条样式div滚动条 带滚动条的div div滚动条样式
flex实现鼠标滚动放大缩小(以鼠标的位置为中心放大缩小)源码奉上
div随滚动条上下滚动,div随滚动条上下滚动div随滚动条上下滚动div随滚动条上下滚动
主要介绍了js实现鼠标滚轮控制图片缩放效果的方法,涉及onmousewheel事件及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
网页局部div随滚动条置顶滚动 效果很好,跟普通的滚动不太一样,没有延迟。
jQuery实现将div的滚动条滚动到指定位置 jQuery实现将div的滚动条滚动到指定位置
主要为大家详细介绍了js实现鼠标滑动到某个div禁止滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Div放大效果的javascript源码
一个很好用的javaScript写的小程序,可实现div的拖动、变形。解压后直接拷到程序中就可运行
html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果
优秀的的div滚动条优化代码 优化之后不在影响滚动功能的情况下使div的滚动条变为半透明的...
DIV滚动悬浮层,页面滚动条滚动,悬浮层保持位置不变!
今天有个需求,要实现弹框,并且需要能过拖动位置,放大缩小等功能,这里是一个纯JS实现滚轮放大缩小的例子,有需要完整案例,或者其他功能可以私信,我懂的都会帮你
jquery图片放大缩小 鼠标经过 图片在div内部自动放大
div滚动条样式一览-div+css设计网,div滚动条,多个div滚动条样式
NULL 博文链接:https://solodu.iteye.com/blog/574539
NULL 博文链接:https://solodu.iteye.com/blog/574857
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条