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 的addEventListener()及attachEvent()区别分析
May 21 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
js中创建对象的几种方式
Feb 05 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
python内存动态分配过程详解
2019/07/15 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
Django返回HTML文件的实现方法
2020/09/17 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
应届大学生自荐信
2013/12/05 职场文书
高中校园广播稿
2014/01/11 职场文书
读书小明星事迹材料
2014/05/03 职场文书
python中的None与NULL用法说明
2021/05/25 Python
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python