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
原创粉丝点击