html 代码 / JavaScript
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 无标题文档
- </title>
- <style>
- ul{width:310px;margin:0;position:relative;top:30px;left:320px; } ul li{width:80px;height:80px;background:#ccc;border:1px
- #000 solid;margin:10px;float:left;list-style:none; }
- </style>
- </head>
- <body>
- <ul>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- </ul>
- <script>
- function getStyle(obj, attr) {
- if (obj.currentstyle) {
- return obj.currentStyle[attr];
- } else {
- return getComputedStyle(obj, false)[attr];
- }
- };
- function domove(obj, JSON, fn) {
- clearInterval(obj.timer);
- obj.timer = setInterval(function() {
- for (var attr in JSON) {
- if (attr == 'opacity') {
- var iCur = parseInt(getStyle(obj, attr) * 100);
- var speed = (JSON.opacity - iCur) / 8;
- speed > 0 ? speed = Math.ceil(speed) : speed = Math.floor(speed);
- if (iCur == JSON.opacity) {
- clearInterval(obj.timer);
- if (fn) {
- fn()
- };
- } else {
- document.title = iCur;
- obj.style.opacity = (iCur + speed) / 100;
- obj.style.filter = 'alpha(opacity:iCur)'
- };
- } /// 透明度改变
- else {
- var iCur = parseInt(getStyle(obj, attr));
- var dis = parseInt(JSON[attr]) - iCur;
- var speed = dis / 8;
- speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
- if (iCur != parseInt(JSON[attr])) {
- obj.style[attr] = parseInt(getStyle(obj, attr)) + speed + 'px';
- } else {
- clearInterval(obj.timer) if (fn) {
- fn()
- }
- };
- } /// 非透明度改变
- }
- },
- 30)
- } // 运动库
- Windows.onload = function() {
- var aLi = document.getElementsByTagName('li');
- for (var i = 0; i < aLi.length; i++) {
- aLi[i].style.top = aLi[i].offsetTop + 'px';
- aLi[i].style.left = aLi[i].offsetLeft + 'px';
- }
- for (var i = 0; i < aLi.length; i++) {
- aLi[i].style.position = 'absolute';
- aLi[i].style.margin = 0;
- } // 布局转换
- for (var i = 0; i < aLi.length; i++) {
- var maxindex = 1;
- aLi[i].onmouseover = function() {
- domove(this, {
- 'width': '140px',
- 'height': '140px',
- 'margin': '-30px'
- }) maxindex++;
- this.style.zIndex = maxindex;
- }
- aLi[i].onmouseout = function() {
- domove(this, {
- 'width': '80px',
- 'height': '80px',
- 'margin': '0'
- })
- }
- }
- }
- </script>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/29258/7612aedb90e69df4c54d684777b02095.html