47、JavaScript的运动----完美运动框架的应用----放大缩小图片的实现(布局转换的实现)
来源:互联网 发布:flac转wav软件 mac 编辑:程序博客网 时间:2024/03/28 19:37
1、JavaScript的运动----完美运动框架的应用----放大缩小图片的实现
2、测试代码
2.1 move.js
/** * 可以方便的获取到非行间样式的数值 * @param {Object} obj * @param {Object} attr */function getStyle(obj, attr) {if (obj.currentStyle) {return obj.currentStyle[attr];} else {return getComputedStyle(obj, false)[attr];}}/** * 要注意运动停止条件的判断 * @param {Object} obj * @param {Object} json * @param {Object} fn */function startMove(obj, json, fn) {clearInterval(obj.timer);obj.timer = setInterval(function() {var bStop = true; //这一次运动就结束了——所有的值都到达了for (var attr in json) {//1.取当前的值ֵvar iCur = 0;if (attr == 'opacity') {iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);} else {iCur = parseInt(getStyle(obj, attr));}//2.算速度var iSpeed = (json[attr] - iCur) / 8;iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);//3.检测停止//要注意,完美运动框架运动的停止的检测,与单个属性停止的检测不一样//这个要等所有的属性,都到了后,才停止运动//所以有一个属性值没到的话,将标志运动停止的变量bStop设置为falseif (iCur != json[attr]) {bStop = false;}if (attr == 'opacity') {obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';obj.style.opacity = (iCur + iSpeed) / 100;} else {obj.style[attr] = iCur + iSpeed + 'px';}}//4、对于运动的判断if (bStop) {clearInterval(obj.timer);if (fn) {fn();}}}, 30)}
2.2 html代码
<html xmlns="http://www.w3.org/1999/xhtml"><head><style>* {margin: 0;padding: 0;}#ul1 {width: 366px;margin: 0 auto;position: relative;margin-top: 50px;}#ul1 li {list-style: none;width: 100px;height: 100px;background: #CCC;border: 1px solid black;float: left;margin: 10px;z-index: 1;}img {overflow: hidden;width: inherit;height: inherit;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="move.js"></script><script>window.onload = function() {var oUl = document.getElementById('ul1');var aLi = oUl.getElementsByTagName('li');var iMinZindex = 2;var i = 0;//1.布局转换for (i = 0; i < aLi.length; i++) {//aLi[i].innerHTML='left:'+aLi[i].offsetLeft+', top:'+aLi[i].offsetTop;aLi[i].style.left = aLi[i].offsetLeft + 'px';aLi[i].style.top = aLi[i].offsetTop + 'px';}for (i = 0; i < aLi.length; i++) {aLi[i].style.position = 'absolute';aLi[i].style.margin = '0';}//2.加事件for (i = 0; i < aLi.length; i++) {aLi[i].onmouseover = function() {//设置显示的层级关系this.style.zIndex = iMinZindex++;//根据startMove(this, {marginLeft: -50,marginTop: -50,width: 200,height: 200});};aLi[i].onmouseout = function() {startMove(this, {width: 100,height: 100,marginLeft: 0,marginTop: 0});};}};</script></head><body><ul id="ul1"><li><img src="Desert.jpg" /></li><li><img src="Desert.jpg" /></li><li><img src="Desert.jpg" /></li><li><img src="Desert.jpg" /></li><li><img src="Desert.jpg" /></li><li><img src="Desert.jpg" /></li><li><img src="Desert.jpg" /></li><li><img src="Desert.jpg" /></li><li><img src="Desert.jpg" /></li><li><img src="Desert.jpg" /></li></ul></body></html>
3、测试图片
1 0
- 47、JavaScript的运动----完美运动框架的应用----放大缩小图片的实现(布局转换的实现)
- Javascript实现完美的运动动画框架
- 46、JavaScript的运动----完美运动框架的实现----注意运动停止的判断的技巧
- JavaScript实现图片的放大、缩小、平移
- javaScript实现图片的放大和缩小
- JS的完美运动框架
- 利用javascript实现图片动态的放大和缩小
- 利用javascript实现图片动态的放大和缩小
- javascript实现对图片的随意拖拽,放大缩小
- 48、JavaScript的运动----无缝运动的实现
- 图片放大、缩小、恢复操作的实现
- WriteableBitmap实现对图片的放大缩小
- UIScrollView中实现图片的放大缩小
- 用scrollerView实现图片的放大缩小
- 图片放大缩小的简单实现
- jquery实现图片缩小放大的切换
- 实现点击图片的放大缩小
- 放大缩小图片ImageView的实现
- ReactJS学习系列课程(React 性能优化及immutable使用)
- Unity圆环进度条制作
- Java中子类和父类的实例化顺序
- 使用无监督聚类的关键帧提取算法
- HDOJ 1817 Necklace of Beads
- 47、JavaScript的运动----完美运动框架的应用----放大缩小图片的实现(布局转换的实现)
- 3秒后跳转到登录界面
- cmake用法和注意
- Java类中修饰符
- Qt学习七:控件四:表格控件、网格布局、
- 14.5.1 Resizing the InnoDB System Tablespace
- MySQL详解--锁
- ScrollView嵌套ListView,ViewPager问题总结(二)
- Thinking in Java 第5章 隐藏实施过程 总结