js实现图片缓慢放大缩小效果


Posted in Javascript onAugust 02, 2016

本文实例为大家分享了图片缓慢放大缩小js实现代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片的缓慢缩放</title>
</head>
<script>
  window.onload = function(){
    var btn_big = document.getElementById("big");
    var btn_small = document.getElementById("small");
    var pic = document.getElementById("pic");
    //缓慢放大
    btn_big.onclick = function(){
      var width = parseInt(pic.style.width);
      var i = width;
      var count = 0;
      console.log(width);
      var timer = setInterval(function(){
        count++;
        i++;
        pic.style.width = i + "%";
        if(count == 10 ){
          clearInterval(timer);
        }else if( i > 50){
          btn_big.onclick = function(e){
            btn_big.onclick = null;
          };
        }
      },13);
    };
 
    //缓慢缩小
    btn_small.onclick = function(){
      var width = parseInt(pic.style.width);
      var count = 0;
      if(width == 10){
        alert("图片已最小!!");
        return false;
      }
      console.log(width);
      var timer2 = setInterval(function(){
        count++;
        width--;
        pic.style.width = width +"%";
        if(count == 10){
          clearInterval(timer2);
        }else if( width < 10){
          btn_small.onclick = null;
        }
      },13);
    }
  }
</script>
<style>
  #pic{
    width: 20%;
  }
</style>
<body>
  <div id="pic" style="width: 20%">
    <img src="3.pic.jpg" style="width:100%;">
  </div>
 
  <div class="scale">
    <button id="big">放大</button> <button id="small">缩小</button>
  </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
基于Vuejs实现购物车功能
Aug 02 #Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 #Javascript
js简单时间比较的方法
Aug 02 #Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 #Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 #Javascript
关于微信中a链接无法跳转问题
Aug 02 #Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 #Javascript
You might like
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python3 assert断言实现原理解析
2020/03/02 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
荷兰家电销售网站:Welhof
2020/12/08 全球购物
音乐系毕业生自荐信
2013/10/27 职场文书
阿德的梦教学反思
2014/02/06 职场文书
2014年维稳工作总结
2014/11/18 职场文书
赢在中国观后感
2015/06/02 职场文书
企业年会祝酒词
2015/08/11 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫