无级缩放图片和文字大小

最新推荐文章于 2023-09-07 10:46:15 发布

web_信仰

最新推荐文章于 2023-09-07 10:46:15 发布

阅读量415

点赞数

分类专栏： js效果文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_44546402/article/details/106668801

版权

js效果专栏收录该内容

1 篇文章 0 订阅

订阅专栏


<!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 language=JavaScript type=text/JavaScript>
//无级缩放图片和文字大小
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>

</head>
<body>
<a href="javascript:;" onclick="showimg('https://i-blog.csdnimg.cn/blog_migrate/db8da8380307a7b52fcde773e00a9a32.png');">
<!--图片缩放-->
<img src="https://i-blog.csdnimg.cn/blog_migrate/db8da8380307a7b52fcde773e00a9a32.png" alt="前程无忧签约中国乒乓球国家队 成为官方合作伙伴" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0" ></a> 
<!--文字缩放-->
<a href="javascript:;" onclick="showimg('111');"><p onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)">文字缩放 </p> </a>

</body>
</html>