九宫格图片放大效果-优快云博客

以前看到这种九宫格一样的图片效果，很羡慕。心血来潮，就模仿写了下。

越写越冒汗，觉得实在是很简单（当然要写完善也不简单），越来越觉得自己JS水平实在不怎么样。看看代码，才短短几行，唉，现在觉得能写出jQuery 插件的人才能算是有水平的人了。

代码如下：

HTML：

Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>矩阵图片放大效果</title>
    <style type="text/css">
        * { padding: 0; margin: 0; text-align: center; }
        body { background: #000; }
        ul { margin: 50px auto; width: 180px; height: 180px; overflow: hidden; background: #ccc; position: relative; }
        ul li { width: 58px; height: 58px; float: left; overflow: hidden; text-align: center; list-style: none; border: solid 1px #ccc; }
        ul li img { width: 100%; height: 100%; cursor: pointer; }
    </style>
</head>
<body>
    <ul>
        <li>
            <img alt="" src="images/gallery/thumb-1.jpg" /></li>
        <li>
            <img alt="" src="images/gallery/thumb-2.jpg" /></li>
        <li>
            <img alt="" src="images/gallery/thumb-3.jpg" /></li>
        <li>
            <img alt="" src="images/gallery/thumb-4.jpg" /></li>
        <li>
            <img alt="" src="images/gallery/thumb-5.jpg" /></li>
        <li>
            <img alt="" src="images/gallery/thumb-6.jpg" /></li>
        <li>
            <img alt="" src="images/gallery/thumb-7.jpg" /></li>
        <li>
            <img alt="" src="images/gallery/thumb-2.jpg" /></li>
        <li>
            <img alt="" src="images/gallery/thumb-5.jpg" /></li>
    </ul>
</body>
</html>

JS代码部分：

Code
<script type="text/javascript">
    var edge = { width: $('ul').width(), height: $('ul').height() };
    var SideWidth = 100;
    $(function() {
        //待所有LI自动就位后，设置好position这个CSS属性
        $('ul>li').each(function() {
            $(this).css({ "left": $(this).position().left + "px", "top": $(this).position().top + "px" });
            $(this).attr('ref', $(this).css('left')).attr('lang', $(this).css('top')); //记录原始left和top，用于恢复位置
        }).each(function() {
            $(this).css({ "position": "absolute" });
        });
        $('ul>li').hover(function() {
            $(this).css({ "z-index": "10" }).animate({ width: SideWidth + "px", height: SideWidth + "px", left: fnGetRelateLength(this, "left"), top: fnGetRelateLength(this, "top") }, "fast");
        }, function() {
            $(this).animate({ width: "58px", height: "58px", "top": $(this).attr('lang'), 'left': $(this).attr('ref') }, "fast", function() { $(this).css({ "z-index": "0" }) });
        });
    });

    //获取相对的绝对定位位置
    function fnGetRelateLength(obj, attr) {
        var theObj = $(obj);
        var relateLength = null;
        if (parseInt(theObj.css(attr).replace("px", "")) > 0) {//防止越界
            relateLength = theObj.css(attr).replace("px", "") - 20;
            if (relateLength + SideWidth > (attr == "top" ? edge.height : edge.width)) {
                relateLength = (attr == "top" ? edge.height : edge.width) - SideWidth - 2;//-2是为了让它的border有显示。这个位置不好，要处理
            }
        } else {
            relateLength = 0;
        }
        theObj = null;
        return relateLength + "px";
    }
</script>

转载于:https://www.cnblogs.com/deafcat/archive/2009/04/08/1431868.html