WEB开发 JS实例_九宫格橱窗展示

程序开发前端后端 新手前端开发用什么开发工具 传智播客前端开发就业班视频

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)
        }//运动库
        window.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>

前端开发加载部分页面 博客 阿里web前端开发面试

» 本文来自:前端开发者 » 《WEB开发 JS实例_九宫格橱窗展示》
» 本文链接地址:https://www.rokub.com/5431.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!