您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > 图片特效 >

JavaScript定义按钮控制图片放大缩小显示

时间：2014-05-04 08:39 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<title>图片放大缩小</title>
</head>
<body>
<p align="center">
  <input type="button" value="放大" onclick="blowup()">
  <input type="button" value="缩小" onclick="reduce()">
</p>
<table WIDTH="300" BORDER="0" ALIGN="CENTER">
  <tr>
    <td><div align="center">
      <input NAME="images1" TYPE="image" ID="images1" SRC="http://www.codesocang.com/uploads/allimg/140429/2-14042ZS3400-L.jpg?n" ALIGN="MIDDLE" BORDER="0">
    </div></td>
  </tr>
</table>
<p>
<script language="javascript">
function blowup()
{
	var height = images1.height;
	var width = images1.width;
	if ((height <= height * 2)||(width <= width * 2))
	{
		images1.height = images1.height + 20;
		images1.width = images1.width + 20;
	}
}
function reduce()
{
	if ((images1.width > 100)||(images1.height > 100))
	{
		images1.height = images1.height - 20;
		images1.width = images1.width - 20;
	}
}
</script>
</p>
<div ALIGN="CENTER"></div>
<p>  </p>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

网页上有一个按钮，Js为其添加动作，让其来控制图片的放大和缩小显示。鼠标点击放大按钮后，图片则会放大显示，每点击一次放大不同的倍数，位数自定义便可。反之，则点击一次缩小一下图片，兼容主流浏览器。

JavaScript定义按钮控制图片放大缩小显示由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/pic/7293.html

标签：网站源码

上一篇：Js实现鼠标滚轮放大缩小图片

下一篇：Js图片拖动，随意移动图片

[图片特效] HTML5鼠标悬停放大图片心形图片

[图片特效] 给图片加上播放按钮

[图片特效] 带左右按钮js+css淘宝网焦点图切

[图片特效] 带小圆点的大屏焦点图轮播代码

[图片特效] 鼠标经过CSS图片边框效

[图片特效] 原生js面对对象封装版仿淘宝首页

[图片特效] CSS Filter属性特效大全

[图片特效] 一个JS横向左右切换的枫叶焦点图

[图片特效] 图片不存在的时候，显示一个默认

[图片特效] Animated CSS3 Gallery基于 CSS3

[图片特效] JS实现图片翻书效果

[图片特效] 仿新浪滑屏大图广告定时收缩为小

相关内容推荐

网页设计工作室

CSS BUG处理方法大

SVG指针时钟

99个实用PNG图标

LAMP 服务器安装配置

系统程序免费下载

微软|ASP.NET|A

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1