代码改变世界

更改页面背景的jquery插件

2012-10-31 14:07  Zhuang miao  阅读(350)  评论(1编辑  收藏  举报

 js代码

/**
 * Created with JetBrains WebStorm.
 * User: C-Jarrick.Miao
 * Date: 10/31/12
 * Time: 9:36 AM
 * To change this template use File | Settings | File T

 
*/

(function (jquery) {
    
    jquery.fn.changbg = function (options) {
        var opts = options;
        var obj=this;
        if (jquery.isArray(opts)) {
            var linum = opts.length;
            var content = jquery("<div id='imgscrolldiv' />");
            var list = jquery("<ul />").addClass("imgscroll");
            for (var i = 0; i < linum; i++) {
                list.append(jquery("<li class='picaction' >Desktop"+ (i+1).toString()+"</li>").attr("bgpic", opts[i]));
             }
            content.append(list);
            $(obj).append(content);
            $(".picaction").bind("click", function () {
                $('body').css("background-image", "url(" + $(obj).attr('bgpic') + ")");
            });
            
        } else {
            throw new Error("doesn't Array Element")
        }
    };

})(jQuery)

调用方法 

<script type="text/javascript">
       var imageList=new Array();
       imageList [0] = 'wallpapers/bgmz.jpg'; //背景图象的路径//
       imageList [1] = 'wallpapers/blue.jpg';
       imageList [2] = 'wallpapers/desktop.jpg';
       imageList [3] = 'wallpapers/sky.jpg';
       $("body").changbg(imageList);
   </script>