HTML中图片如何无限级放大?

HTML中图片如何无限级放大?

无意在浏览别人的页面的时候,发现了一个很有意思的效果。在新闻列表中的图片,当我们滑动鼠标的时候,图片可以放大或缩小,这样就可以把一些小图片进行自由放大,比JQ的放大简单得多了,看了下代码,不多,就两个地方,我们可以试一下。以下是实现方法,代码很简单。

一、在页面HEAD中引用方法:
<SCRIPT language=JavaScript type=text/JavaScript>
//改变图片大小
function resizepic(thispic)
{
if(thispic.width>400) thispic.width=400;
}
//无级缩放图片大小
function bbimg(o)
{
  var zoom=parseInt(o.style.zoom, 10)||100;
  zoom+=event.wheelDelta/12;
  if (zoom>0) o.style.zoom=zoom+'%';
  return false;
}
</SCRIPT>
 
二、在页面BODY中引用方法:
<img src="图片路径" onmousewheel="return bbimg(this)" οnlοad="javascript:resizepic(this)" />

看看,是不是很简单呀,相信难不倒聪明的你了。本文由YOOZHAN优站,专业网站优化 www.yoozhan.com 为LED软灯条 www.ledrdt.com 推广制作,转载请保留本链接,谢谢合作。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值