jQuery的一个插件——d_imagechange

chenfeng0104

浏览: 597303 次
性别:
来自: 上海

最近访客更多访客>>

chen88358323

fantao005x

botao99284

JiefzzLon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery CSS Chrome 百度 IE

备注：由于不能转载，以下代码是从网站copy过来的
示例：
<!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>Demo-图片轮换-D.夏亦知非</title>
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.d.imagechange.min.js"></script>
<style>
body{margin:0;padding:0px;}
.title{height:25px;line-height:25px;background-color:#000;color:#FFF;margin:10px 0;padding-left:20px;font-family:"Verdana","宋体";font-size:12px;}
</style>
<script>

// 需要你写的数据
var data = [
        {title:'李彦宏',desc:'立刻加入我们,获取百度之星荣誉称号',src:'img/1.jpg',href:'http://www.baidu.com',target:'_blank'},
        {title:'马云',desc:'立刻加入我们,获取TOP大赛巨额奖项',src:'img/2.jpg'},
        {title:'路飞',desc:'立刻加入我们,寻找伟大航路的宝藏',src:'img/3.jpg'}
];

$(document).ready(function(){
        $('#pic1').d_imagechange({
                data:data,
                animateStyle:'o'//默认值'o',可以不写
        });

        $('#pic2').d_imagechange({
                data:data,
                animateStyle:'x'
        });

        $('#pic3').d_imagechange({
                data:data,
                animateStyle:'y'
        });

        $('#pic4').d_imagechange({
                data:data,
                animateStyle:'show'
        });

        $('#pic5').d_imagechange({
                data:data,
                animateStyle:'show-x'
        });
        $('#pic6').d_imagechange({
                data:data,
                animateStyle:'show-y'
        });
        $('#pic7').d_imagechange({
                data:data,
                animateStyle:'none'
        });
});
</script>
</head>

<body>
<div class="title">Demo 1 默认效果:渐显 animateStyle:'o'</div>
<div id="pic1" style="width:300px;height:200px;margin-left:20px;">
</div>
<div class="title">Demo 2 横向滚动效果 animateStyle:'x'</div>
<div id="pic2" style="width:300px;height:200px;margin-left:20px;">
</div>
<div class="title">Demo 3 纵向滚动效果 animateStyle:'y'</div>
<div id="pic3" style="width:300px;height:200px;margin-left:20px;">
</div>
<div class="title">Demo 4 原地收缩伸展 animateStyle:'show'</div>
<div id="pic4" style="width:300px;height:200px;margin-left:20px;">
</div>
<div class="title">Demo 5 横向收缩伸展 animateStyle:'show-x'</div>
<div id="pic5" style="width:300px;height:200px;margin-left:20px;">
</div>
<div class="title">Demo 6 纵向收缩伸展 animateStyle:'show-y'</div>
<div id="pic6" style="width:300px;height:200px;margin-left:20px;">
</div>
<div class="title">Demo 7 无动画< animateStyle:'none'</div>
<div id="pic7" style="width:300px;height:200px;margin-left:20px;">
</div>

</body>

</html>

插件：
/********************************************************************************************************
* D-ImageChange
*----------------------------------------------------------------------------------------------------
* @Desc 图片轮换插件
*----------------------------------------------------------------------------------------------------
* @Author D.夏亦知非
* @Email DeclanZhang@gmail.com
* @QQ 29540200
* @Blog http://onblur.iteye.com
* @Date 2009-10-19
* @Version 1.1
* @JQueryVersion 1.3.2
*
* @update v1.1 增加清空原始内容功能,以免页面加载完成之前显示大片空白
*                 v1.2 修正IE6每次从服务器读取背景图片的BUG
**/

(function($){

jQuery.fn.extend({

        d_imagechange:function(setting){

                // 修正IE6每次从服务器读取背景图片的BUG
                document.execCommand("BackgroundImageCache", false, true);

                var config = $.extend({
                        bg:true,                                                // 是否背景色
                        title:true,                                             // 是否有标题
                        desc:true,                                              // 是否有描述
                        btn:true,                                               // 是否显示按钮
                        repeat:'no-repeat',                             // 重复规则 'no-repeat' 'repeat-x' 'repeat-y' 'repeat'

                        bgColor:'#000',                                 // 背景色
                        bgOpacity:.5,                                   // 背景透明度
                        bgHeight:40,                                    // 背景高

                        titleSize:14,                                   // 标题文字大小
                        titleFont:'Verdana,宋体',         // 标题文本字体
                        titleColor:'#FFF',                              // 标题文本颜色
                        titleTop:4,                                             // 标题上边距
                        titleLeft:4,                                    // 标题左边距

                        descSize:12,                                    // 描述文字大小
                        descFont:'Verdana,宋体',                  // 描述文本字体
                        descColor:'#FFF',                               // 描述文本颜色
                        descTop:2,                                              // 描述上边距
                        descLeft:4,                                             // 描述左边距

                        btnColor:'#FFF',                                // 按钮颜色1
                        btnOpacity:.5,                                  // 未选中按钮透明度
                        btnFont:'Verdana',                              // 按钮文本字体
                        btnFontSize:12,                                 // 按钮文字大小(注意:Chrome有默认最小字号的限制)
                        btnFontColor:'#000',                    // 按钮文本颜色
                        btnText:true,                                   // 是否显示文本
                        btnWidth:15,                                    // 按钮宽
                        btnHeight:15,                                   // 按钮高
                        btnMargin:4,                                    // 按钮间距
                        btnTop:4,                                               // 按钮上边距

                        playTime:2000,                                  // 轮换间隔时间,单位(毫秒)
                        animateTime:500,                                // 动画执行时间,单位(毫秒)
                        animateStyle:'o',                               // 动画效果:'o':渐显 'x':横向滚动 'y':纵向滚动 'show':原地收缩伸展 'show-x':横向收缩伸展 'show-y':纵向收缩伸展' none':无动画
                        width:300,                                              // 宽, 不设定则从DOM读取
                        height:200                                              // 高, 不设定则从DOM读取

                },setting);

                return $(this).each(function(){
                        var _this = $(this);
                        var _w = config.width || _this.width();                 // 宽
                        var _h = config.height || _this.height();               // 高
                        var _n = config.data.length;                                    // 数目
                        var _i = 0;                                                                             // 当前显示的item序号

                        _this.empty()
                                 .css('overflow','hidden')
                                 .width(_w)
                                 .height(_h);

                        // 半透明背景
                        if(config.bg){
                        $('<div />').appendTo(_this)
                                                .width(_w)
                                                .height(config.bgHeight)
                                                .css('background-color',config.bgColor)
                                                .css('opacity',config.bgOpacity)
                                                .css('position','absolute')
                                                .css('marginTop',_h-config.bgHeight)
                                                .css('zIndex',3333);
                        }

                        // 文字区
                        var _textArea =
                        $('<div />').appendTo(_this)
                                                .width(_w)
                                                .height(config.bgHeight)
                                                .css('position','absolute')
                                                .css('marginTop',_h-config.bgHeight)
                                                .css('zIndex',6666);
                        // 按钮区
                        var _btnArea =
                        $('<div />').appendTo(_this)
                                                .width(_w)
                                                .height(config.bgHeight)
                                                .css('position','absolute')
                                                .css('marginTop',_h-config.bgHeight)
                                                .css('marginLeft',_w-(config.btnWidth+config.btnMargin)*_n)
                                                .css('zIndex',9999)
                                                .css('display',config.btn?'block':'none');

                        // 插入空div修正IE的绝对定位BUG
                        $('<div />').appendTo(_this);

                        // 图片区
                        var _imgArea =
                        $('<div />').appendTo(_this)
                                                .width('x,show-x'.indexOf(config.animateStyle)!=-1?_w*_n:_w)
                                                .height('y,show-y'.indexOf(config.animateStyle)!=-1?_h*_n:_h);

                        // 初始化图片文字按钮
                        $.each(config.data,function(i,n){
                                $('<a />').appendTo(_imgArea)
                                                  .width(_w)
                                                  .height(_h)
                                                  .attr('href',n.href?n.href:'')
                                                  .attr('target',n.target?n.target:'')
                                                  .css('display','block')
                                                  .css('background-image','url('+n.src+')')
                                                  .css('background-repeat',config.repeat)
                                                  .css('display','block')
                                                  .css('float','x,show-x'.indexOf(config.animateStyle)!=-1?'left':'');

                                if(config.title){
                                $('<b />').appendTo(_textArea)
                                                  .html(n.title?n.title:'')
                                                  .css('display',i==0?'block':'none')
                                                  .css('fontSize',config.titleSize)
                                                  .css('fontFamily',config.titleFont)
                                                  .css('color',config.titleColor)
                                                  .css('marginTop',config.titleTop)
                                                  .css('marginLeft',config.titleLeft);
                                }

                                if(config.desc){
                                $('<p />').appendTo(_textArea)
                                                  .html(n.desc?n.desc:'')
                                                  .css('display',i==0?'block':'none')
                                                  .css('fontSize',config.descSize)
                                                  .css('fontFamily',config.descFont)
                                                  .css('color',config.descColor)
                                                  .css('marginTop',config.descTop)
                                                  .css('marginLeft',config.descLeft);
                                }


                                $('<a />').appendTo(_btnArea)
                                                  .width(config.btnWidth)
                                                  .height(config.btnHeight)
                                                  .html(config.btnText?i+1:'')
                                                  .css('fontSize',config.btnFontSize)
                                                  .css('fontFamily',config.btnFont)
                                                  .css('textAlign','center')
                                                  .css('display','block')
                                                  .css('float','left')
                                                  .css('overflow','hidden')
                                                  .css('marginTop',config.btnTop)
                                                  .css('marginRight',config.btnMargin)
                                                  .css('background-color',config.btnColor)
                                                  .css('opacity',i==0?1:config.btnOpacity)
                                                  .css('color',config.btnFontColor)
                                                  .css('cursor','pointer')

                        });

                        // 保存所有元素集合的引用,方便在事件中使用
                        var _bs = _btnArea.children('a');
                        var _ts = _textArea.children('b');
                        var _ds = _textArea.children('p');
                        var _is = _imgArea.children('a');

                        // 针对不同的动画效果的附加设置, 主要是block的问题, 若在初始化时设置block:none会造成之后无block效果
                        if('o,show,none'.indexOf(config.animateStyle)!=-1){
                                _is.not(':first').hide();
                                _is.css('position','absolute');
                        }

                        // 添加按钮事件
                        _bs.click(function(){
                                var ii = _bs.index(this);
                                if(ii==_i){return;}

                                _ts.eq(_i).css('display','none');
                                _ts.eq(ii).css('display','block');
                                _ds.eq(_i).css('display','none');
                                _ds.eq(ii).css('display','block');
                                _bs.eq(_i).css('opacity',config.bgOpacity);
                                _bs.eq(ii).css('opacity',1)

                                switch(config.animateStyle){
                                case 'o' :
                                        _is.eq(_i).fadeOut(config.animateTime);
                                        _is.eq(ii).fadeIn(config.animateTime);
                                        break;
                                case 'x' :
                                        _imgArea.animate({marginLeft:-ii*_w},config.animateTime);
                                        break;
                                case 'y' :
                                        _imgArea.animate({marginTop:-ii*_h},config.animateTime);
                                        break;
                                case 'show' :
                                case 'show-x' :
                                case 'show-y' :
                                        _is.eq(_i).hide(config.animateTime);
                                        _is.eq(ii).show(config.animateTime);
                                        break;
                                case 'none' :
                                        _is.eq(_i).hide();
                                        _is.eq(ii).show();
                                        break;
                                }
                                _i = ii;
                        });

                        // 添加轮换任务
                        var _play = setInterval(play,config.playTime);

                        function play(){
                                _bs.eq((_i+1)%_n).click()
                        }
                        // 鼠标进入事件
                        _this.mouseover(function(){
                                clearInterval(_play);
                        });

                        // 鼠标离开事件
                        _this.mouseout(function(){
                                _play = setInterval(play,config.playTime);
                        });
                });
        }
});

})(jQuery);

分享到：

jQuery实现多选框全部选中和全部取消 | 了解值传递和引用传递

2010-03-18 11:31
浏览 4433
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论