一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

基于jquery tips提示效果

时间:2011-10-27 编辑:简简单单 来源:一聚教程网

效果图:

 代码如下 复制代码

sym.jTips-1.0.js 源文件:

/*
sym.jTips-1.0
by 4yming - 微博:http://weibo.com/4yming
-----------------------------------------
用法:
基本用法:
$.jTips({
_text:'Hello,world!'//显示的文本,也支持html
});
扩展用法:
$.jTips({
_text:'Hello,world!',
_bgColor:'#FDFADC',//背景色
_border:'1px #F2EEA8 solid',//边框颜色
_speed:300,//显示速度
_timeout:3000,//显示时间
_padding:'0 10px',//内容填充
_fontSize:'12px',//字体大小
_fontColor:'#666',//字体颜色
_delay:0,//延时显示时间设置
_opacity:1//透明度
});
*/
$.extend({
jTips:function(options){
//options
var _opt = options || {};
_opt._text = _opt._text || 'jTips';
_opt._bgColor = _opt._bgColor || '#FDFADC';
_opt._border = _opt._border || '1px #F2EEA8 solid';
_opt._speed = _opt._speed || 300;
_opt._timeout = _opt._timeout || 3000;
_opt._padding = _opt._padding || '0 10px';
_opt._fontSize = _opt._fontSize || '12px';
_opt._fontColor = _opt._fontColor || '#666';
_opt._zIndex = _opt._zIndex || 99999;
_opt._delay = _opt._delay || 0;
_opt._opacity = _opt._opacity || 1;

//element
var _timestamp = (new Date()).valueOf();
var _id = 'jTips' + _timestamp;
var _jTips = $('

');
_jTips.css({
'position':'fixed',
'left':0,
'right':0,
'width':'99.8%',
'top':'-27px',
'height':'25px',
'line-height':'25px',
'background-color':_opt._bgColor,
'border':_opt._border,
'padding':_opt._padding,
'font-size':_opt._fontSize,
'color':_opt._fontColor,
'z-index':_opt._zIndex,
'text-align':'center',
'opacity':_opt._opacity,
'filter':'alpha(opacity=' + (_opt._opacity * 100) + ')'
});

//ie6 bug
if ( $.browser.msie
&& ( $.browser.version.substring( 0, 1 ) == '5'
|| $.browser.version.substring( 0, 1 ) == '6' ) ) {
_jTips.css({'position':'absolute','top':$(window).scrollTop() - 27});
$(window).scroll(function() {
_jTips.css('top', $(window).scrollTop() + 'px');
});
}

_jTips.html(_opt._text);
$('body').append(_jTips);

//show tips
setTimeout(function(){
var top = 0;
//ie6 bug
if ( $.browser.msie
&& ( $.browser.version.substring( 0, 1 ) == '5'
|| $.browser.version.substring( 0, 1 ) == '6' ) ) {
top = $('#' + _id).offset().top + 27;
}

$('#' + _id).animate({
top:top
},_opt._speed);

//auto hide tips
setTimeout(function(){
top = -27;
//ie6 bug
if ( $.browser.msie
&& ( $.browser.version.substring( 0, 1 ) == '5'
|| $.browser.version.substring( 0, 1 ) == '6' ) ) {
top = $('#' + _id).offset().top - 27;
}
$('#' + _id).animate({
top:top
},_opt._speed,
function(){
$('#' + _id).remove();
});
},_opt._timeout);
},_opt._delay);
}
});

html代码:





无标题文档











有种你点我啊!

热门栏目