鼠标滚轮控制图片放大缩小显示效果

1个月前 (04-16 15:00)阅读39回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5074
  • 级别管理员
  • 主题1014
  • 回复2
楼主

网页中常用的鼠标滚轮控制图片缩放显示特效,用户只需要滚动鼠标滚轮就可以实现图片放大缩小显示,自定义缩放大小。

<script language="javascript">
var count = 10;
function re_wumingren(oImage)
{//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
count = Counting(count);
resize_www_wuming_ren(oImage,count);
return false;
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
function Counting(newzoom){
if (event.wheelDelta >= 120)
newzoom++;
else if (event.wheelDelta <= -120)
newzoom--;
if (newzoom<1) newzoom=1; ////只允许缩小到10%,两个数字要同时修改且保持一致
if (newzoom>10) newzoom=10; ////只允许放大到100%,两个数字要同时修改且保持一致
return newzoom;
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
function resize_www_wuming_ren(oImage,newzoom){
oImage.style.zoom = newzoom + '0%';
count=newzoom;
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
</script>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<img src="/img/20240220_wuming_ren_7.jpg" onDblClick="return resize_www_wuming_ren(this,10);return false;" onmousewheel="return re_wumingren(this)">


0
0
收藏0
回帖

鼠标滚轮控制图片放大缩小显示效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息