《js实现图片缓慢缩放的效果》之学习总结
来源:互联网 发布:淘宝文案兼职一篇多少 编辑:程序博客网 时间:2024/05/17 08:21
js
学习资源来自慕课网: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 实现控件缓慢平移的效果
- 实现图片的缩放
- 布局(一)——流体浮动三列布局
- 做菜单
- 用ASP.NET实现下载远程图片保存到本地的方法 保存抓取远程图片的方法
- 最全的常用正则表达式大全
- VirtualBox 配置网络(Host-Only)
- 《js实现图片缓慢缩放的效果》之学习总结
- NSString的使用, 比较全 转得
- CSDN论坛RSS阅读,平板电脑专用(csdn移动端)
- CUDA内存拷贝
- 《js倒计时效果》之限时抢
- 【大话设计】之个别模式总结(一)
- 黑马程序员 JAVA基础学习笔记 主函数等
- 《js动画效果》之同时运动兼完美运动框架
- 《js动画效果》之链式运动