第一个jQuery插件

最新推荐文章于 2024-11-14 10:56:19 发布

Tiny1211

最新推荐文章于 2024-11-14 10:56:19 发布

阅读量77

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/-gap/archive/2012/06/13/2548352.html

版权

View Code

<!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>Crow_百叶窗</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
(function($) {
    $.fn.extend( {
        "baiye" : function(options) {
            options = $.extend( {
                z_index : 1000,
                width : 1084
            }, options);
            $(this).css("position", "relative");// 设置为相对定位
            var allWidth = parseInt($(this).css("width"));    //外层宽度
            var divChild = $(this).children();        //子元素设置为绝对定位
            divChild.css("position", "absolute");
            var n = divChild.length;// 获取总数量
            var imgSee = divChild.find("img").next();
            var widthSee = imgSee.width();    //'按钮'宽度
            var bai_current = 0;    // 当前索引
            divChild.each(function(e) {
                divChild.eq(e).css( {
                    "z-index" : options.z_index - e * 10,
                    "right" : widthSee * (n - e - 1),
                    "position" : "absolute",
                    "width" : options.width
                });
            });
            imgSee.each(function(e) {
                $(this).click(function() {
                    if (bai_current < e) {
                        for ( var i = bai_current; i < e; i++) {
                            divChild.eq(i).animate( {
                                "right" : allWidth - (i + 1) * widthSee
                            }, 600);
                            bai_current = e;
                        }
                    } else {
                        for ( var i = bai_current; i > e; i--) {
                            divChild.eq(i - 1).animate( {
                                "right" : (n - i) * widthSee
                            }, 600);
                            bai_current = e;
                        }
                    }
                });
            });
        }
    });
})(jQuery)

$(function() {
    $("#bai_main_div").baiye();
})
</script>
<style type="text/css">
#bai_main_div {
    margin:0 auto;
    background:#000;
    width:1000px;
    height:526px;
    overflow:hidden;
}
.bai_btn {
    cursor:pointer;
    /*设置透明度*/
     -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    /*设置开始透明度和结束透明度（滤镜）*/
    filter:Alpha(Opacity="75", FinishOpacity="0", Style="2")
}
</style>
</head>
<body>
<div id="bai_main_div">
  <div><img src="suoai.jpg" alt="点击查看更多"/><img class="bai_btn" src="suoai_title.jpg" /></div>
  <div><img src="suoai.jpg" alt="点击查看更多"/><img class="bai_btn" src="suoai_title.jpg" /></div>
  <div><img src="suoai.jpg" alt="点击查看更多"/><img class="bai_btn" src="suoai_title.jpg" /></div>
  <div><img src="suoai.jpg" alt="点击查看更多"/><img class="bai_btn" src="suoai_title.jpg" /></div>
  <div><img src="suoai.jpg" alt="点击查看更多"/><img class="bai_btn" src="suoai_title.jpg" /></div>
  <div><img src="suoai.jpg" alt="点击查看更多"/><img class="bai_btn" src="suoai_title.jpg" /></div>
</div>
</body>
</html>