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 相关文章推荐
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
react合成事件与原生事件的相关理解
May 13 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的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
教你安装python Django(图文)
2013/11/04 Python
Python实现的简单万年历例子分享
2014/04/25 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
python在文本开头插入一行的实例
2018/05/02 Python
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
介绍一下write命令
2014/08/10 面试题
酒店开业庆典策划方案
2014/05/28 职场文书
现场活动策划方案
2014/08/22 职场文书
英语演讲开场白
2015/05/29 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
Python使用pyecharts控件绘制图表
2022/06/05 Python