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 相关文章推荐
accesskey 提交
Jun 26 Javascript
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
基于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实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
PHP之预定义接口详解
2015/07/29 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
php无限级分类实现方法分析
2016/10/19 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
window.showModalDialog使用手册
2007/01/11 Javascript
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
如何利用Fabric自动化你的任务
2016/10/20 Python
Python解惑之整数比较详解
2017/04/24 Python
python matlibplot绘制3D图形
2018/07/02 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
sass 常用备忘案例详解
2021/09/15 HTML / CSS