[原创]比较方便的onMouseWheel缩放图片效果,复制代码 代码如下:<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>onMouseWheel缩放图片效果-www.phpstudy.Net</TITLE> <body> <script> function bbimg(o) { var zoom=parseInt(o.style.zoom, 10)||100">

原创]比较方便的onMouseWheel缩放图片效果" target="_blank">[原创]比较方便的onMouseWheel缩放图片效果


复制代码 代码如下:

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>onMouseWheel缩放图片效果-www.phpstudy.Net</TITLE>
<body>
<script>
function bbimg(o)
{
var zoom=parseInt(o.style.zoom, 10)||100;
zoom+=event.wheelDelta/12;
if (zoom>0) o.style.zoom=zoom+'%';
}
function addthis()
{
var e=window.event?window.event:e;
var srcE=e.srcElement?e.srcElement:e.target;
if(!srcE) return;
//author:reterry(dxy) www.phpstudy.net欢迎转载,转载时请写明出处。
if (String(srcE.tagName).toLowerCase()=='img'){
//alert('好');
bbimg(srcE)
}
}
function backthis(){
var e=window.event?window.event:e;
var srcE=e.srcElement?e.srcElement:e.target;
if(!srcE) return;
//author:reterry(dxy) www.phpstudy.net欢迎转载,转载时请写明出处。
if ((String(srcE.tagName).toLowerCase()=='img')&&(window.event.ctrlKey)){
//alert('好');
srcE.style.zoom='100%';
}}
document.onmousewheel=addthis;
document.onmouseout=backthis;
</script>
<A id=ImgSpan href="/logos.gif" target=_blank><IMG src="/logos.gif" border=0></A>
<br>鼠标滑轮滚动查看效果,Author:reterry(dxy) www.phpstudy.net欢迎转载,转载时请写明出处。<br>按住ctrl键然后鼠标从图片上移开,图片可恢复原始大小</body></html>


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]



相关阅读:
MSsql每天自动备份数据库并每天自动清除log的脚本
3种取消Windows7快捷方式上小箭头的方法
AJax 学习笔记二(onreadystatechange的作用)
HTML的未来: XHTML 2.0
PHP 数据结构 算法描述 冒泡排序 bubble sort
XHTML+CSS兼容性解决方案小集
asp.net网站开发中使用Sqlite嵌入式数据库
面对网络Unix 和Linux真的安全吗
DHTML模拟菜单
ecshop 订单确认中显示省市地址信息的方法
ASP.NET 2.0的异步页面刷新
Linux操作系统学习方法小结
CSS设计制作网页不要使用@import
驳“AJAX 的七宗罪”
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4