js相册，照片浮动效果

最新推荐文章于 2024-07-06 16:47:02 发布

weixin_30421525

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量104

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/benson-liu/p/3934916.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,p,h1,h2,h3,h4,h5,h6,dl,dd,li{margin:0}
        ol,ul{list-style:none;padding:0;margin:0}
        a{text-decoration:none;}
        img{border:none;}
        .img-panel li{
            position:absolute;
            /*display: inline-block;*/
            width:90px;
            height:120px;
            border: 3px #d9d9d9 solid;
            z-index: 10;
        }
        .img-panel img{
            display: inline;
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="content">
</div>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $.ImagePanel = function(options){
        var _options={
            depend:".content",
            img_min_height:120,
            img_max_height:200,
            img_min_width:90,
            img_max_width:150,
            cols:3,
            img_list:["onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg"]
        };
        _options = $.extend(_options,options);
        var i, panel,ul,li,img;
        panel = document.createElement("div");
        ul = document.createElement("ul");
        panel.className="img-panel";
        for(i=0;i<_options.img_list.length;i++){
            if(i%_options.cols==0&&i!=0){
                panel.appendChild(ul);
                ul = document.createElement("ul");
            }
            li = document.createElement("li");
            li.style.left =(_options.img_min_width+10) * parseInt(i%_options.cols)+"px";
            li.style.top = (_options.img_min_height+10) * parseInt(i/_options.cols)+"px";

            img = document.createElement("img");
            img.src =_options.img_list[i];
            li.appendChild(img);
            ul.appendChild(li);
        }
        $(_options.depend).append(panel);

        $(".img-panel li").mouseover(function(e){
            $(e.currentTarget).css("z-index","1000");
            $(e.currentTarget).animate({margin:"-"+(_options.img_max_width-_options.img_min_width)/2+"px 0 0 -"+(_options.img_max_height-_options.img_min_height)/2+"px",
                width:_options.img_max_width + "px",height: _options.img_max_height + "px"},500,function(){
                $(e.currentTarget).css("z-index","1000");
            });
        });
        $(".img-panel li").mouseleave(function(e){
            $(e.currentTarget).animate({margin:"0",width:_options.img_min_width+"px",height:_options.img_min_height+"px"},200,function(){
                $(e.currentTarget).css("z-index","10");
            });
        });
    };
    $.ImagePanel({});
</script>
</body>
</html>

效果

转载于:https://www.cnblogs.com/benson-liu/p/3934916.html

weixin_30421525

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js相册，照片浮动效果

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body,p,h1,h2,h3,h4,h5,h6,dl,dd,li{margin:0} ol,ul{...
复制链接

扫一扫