js实现按钮控制图片放大缩小还原特效

大陆 js特效 2021-02-12 0

通过js实现按钮来控制图片伸缩显示,可放大或缩小显示,并带有还原按钮供用户还原为原来初始大小。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="博客,个人博客,优秀个人博客,优秀博客,博客网站,js特效,js特效代码,广告代码,www.wuming.ren" />
<meta name="description" content="欢迎来到大陆博客,我们的网址是www.64pc.com,大陆博客官方网站收集的各种高质量js特效代码、广告代码分享,海量js特效代码精品收藏,总有一款适合您的js特效。www.wuming.ren" />
<title>js实现按钮控制图片放大缩小还原特效-大陆博客</title>
<script type="text/javascript">
var PhotoSize = {
  zoom: 0, // 缩放率
  count: 0, // 缩放次数
  cpu: 0, // 当前缩放倍数值
  elem: "", // 图片节点
  photoWidth: 0, // 图片初始宽度记录
  photoHeight: 0, // 图片初始高度记录
//欢迎来到大陆·博客,我们的网址是www.64pc.c om,大陆·博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren  
  init: function(){
    this.elem = document.getElementById("focusphoto");
    this.photoWidth = this.elem.scrollWidth;
    this.photoHeight = this.elem.scrollHeight;
//欢迎来到大陆博·客,我们的网址是www.6 4pc.com,大陆博·客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren   
    this.zoom = 1.2; // 设置基本参数
    this.count = 0;
    this.cpu = 1;
  },
//欢迎来到大陆1·博客,我们的网址是www.6 4pc.com,大陆·博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren 
  action: function(x){
    if(x === 0){
      this.cpu = 1;
      this.count = 0;
    }else{
      this.count += x; // 添加记录
      this.cpu = Math.pow(this.zoom, this.count); // 任意次幂运算
    };
    this.elem.style.width = this.photoWidth * this.cpu +"px";
    this.elem.style.height = this.photoHeight * this.cpu +"px";
  }
};//欢迎来到大陆·博客,我们的网址是www.64pc.co m,大陆·1博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren
// 启动放大缩小效果,用onload方式加载,防止第一次点击获取不到图片的宽高
window.onload = function(){PhotoSize.init()};
</script>
</head>
<body>
本文来源于<a href="http://www.64pc.com/">大陆博客</a>,百度一下:大陆博客,直接找到我们的官方网站。<hr>
<!--欢迎来到大陆博客,我们的网址是www.64pc.com,大陆博客官方网站收集的各种高质量js特效代码、广告代码分享,海量js特效代码精品收藏,总有一款适合您的js特效。www.wuming.ren-->
<script type="text/javascript" src="http://www.wuming.ren/a/tc.js"></script>
<input type="button" value="放大" onclick="PhotoSize.action(1);" /> 
<input type="button" value="缩小" onclick="PhotoSize.action(-1);" /> 
<input type="button" value="还原大小" onclick="PhotoSize.action(0);" /> 
<input type="button" value="查看当前倍数" onclick="alert(PhotoSize.cpu);" />
<br />
<img src="/img/20110427wwwzzjsnet_1.jpg" name="focusphoto" width="300" id="focusphoto" />
</body>
</html>


评论