《js实现图片缓慢缩放的效果》之学习总结
来源:互联网 发布:淘宝刷钻一天完成 编辑:程序博客网 时间:2024/05/21 12:49
学习资源来自慕课网:http://www.imooc.com/learn/80
题述:点击放大,即将图片放大,点击缩小,及缩小图片。此例常应用在如淘宝、京东网站上的图片缩放。
小结:
实现缩放图片的关键点:
1)图片需要用<img>来引用( 通过我本人自己的测试,发现图片的宽高不能通过css或内联style来另外设置,不然缩放不起作用。)
2)实现缩放效果采用setInterVal()缓慢缩放
3)宽高要同比例缩放
例如:以同比例5%的速度增大
img.width = img.width*1.05;
img.height = img.height*1.05;
4)图片缩放的限制:
**每次点击时规定缩放的比例
**图片总体缩放到一定程度后,限制不能缩放
5)注意释放定时器clearInterval();
代码练习如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><style>.box{width:300px;margin:0 auto;height:auto;}</style><script type="text/javascript">/***实现缩放图片的关键点:1)图片需要用<img>来引用 通过我本人自己的测试,发现图片的宽高不能通过css或内联style来另外设置,不然缩放不起作用。2)实现缩放效果采用setInterVal()缓慢缩放3)宽高要同比例缩放 例如:以同比例5%的速度增大 img.width = img.width*1.05; img.height = img.height*1.05;4)图片缩放的限制: **每次点击时规定缩放的比例 **图片总体缩放到一定程度后,限制不能缩放5)注意释放定时器clearInterval();***/window.onload = function(){var big = document.getElementById("big");var small = document.getElementById("small");big.onclick = function(){makeBig();};small.onclick = function(){makeSmall();};var img = document.getElementById("imgdemo");//图片最大限度增加到原来的3倍var maxW = img.width*3; var maxH = img.height*3;//图片最大限度缩小到原来的0.5倍var minW = img.width*0.5;var minH = img.height*0.5;//图片放大function makeBig(){//每次点击后的宽高限于同比例增加50%;var clickW = img.width*1.5;var clickH = img.height*1.5;var timer = setInterval(function(){if(img.width < clickW){//限定宽高增大的程度到每次点击后的宽高的150%if(img.width < maxW){//限定物体能缩放的极限值为maxW//以同比例5%的速度增大img.width = img.width*1.05;img.height = img.height*1.05;}else{alert("亲,图片已放到最大了");clearInterval(timer);}}else{clearInterval(timer);}},10);}//缩小图片function makeSmall(){//每次点击后的宽高限于同比例增加50%;var clickW = img.width*0.5;var clickH = img.height*0.5;var timer = setInterval(function(){if(img.width > clickW){//限定宽高缩放的程度到每次点击后的宽高的50%if(img.width > minW){//限定物体能缩放的极限值为minW//以同比例5%的速度减小img.width = img.width*0.95;img.height = img.height*0.95;}else{alert("亲,图片已缩到最小了");clearInterval(timer);}}else{clearInterval(timer);}},10);}}</script></head><body><div class="box"><img src="default.jpeg" id="imgdemo"></img><p><input type="button" id="big" value="放大" /><input type="button" id="small" value="缩小" /></p></div></body></html>
效果图:
0 0
- 《js实现图片缓慢缩放的效果》之学习总结
- 《js实现图片缓慢缩放的效果》之学习总结
- 用JavaScript实现图片缓慢缩放效果
- js实现的图片缩放
- jQuery实现图片展开缩放的效果
- js实现图片缩放
- 简单实现谷歌地图的图片缩放,移动效果的JS
- js实现鼠标滚轮控制图片缩放效果的方法(转)
- 学习笔记之js实现图片轮播效果
- js实现图片的缩放问题
- AngularJS1.x学习(仿微信图片手势缩放效果实现)
- 带缩放动画效果的图片切换的功能实现
- Android平台上实现图片的缩放,圆角,倒影效果
- Android平台上实现图片的缩放,圆角,倒影效果
- JS实现图片缩放功能
- Js实现图片等比缩放
- Scroller 实现控件缓慢平移的效果
- 实现图片的缩放
- Timer的schedule和scheduleAtFixedRate方法的区别解析
- 控件重绘一
- Runloop学习
- js修改css属性
- Struts2 验证码图片实例
- 《js实现图片缓慢缩放的效果》之学习总结
- gcc Options That Control Optimization
- 网页中复制代码的功能(jscopy) 如何制作网页(代码复制)
- 怎样批量删除.svn文件
- JavaScript对象整理
- HDU 4848-Wow! Such Conquering!(DFS+最优性剪枝)
- ASP.NET 2.0 TreeView 树状控件-父子节点选择javascript脚本
- AWS携手上海嘉定政府推出首个联合孵化器 为创业公司拓展AWS云服务可用资源
- 完整的将JPG图片转换成PDF文档