jQuery实现网页右下角悬浮层提示

最近有同事提到类似网页右下角的消息悬浮提示框的制作。我之前也做过一个类似的例子,很简单。是仿QQ消息。现在感觉之前的那个例子只是说了实现原理,,整体上给你的感觉还是太丑,今天为大家带来一个新的例子。是Discuz右下角悬浮层提示的。运行效果如下:

代码如下:

==>jQuery实现网页右下角悬浮层提示=”text/css”>*::::px;::::::::;::#f00;}==><script type=”text/javascript”>(function($j){$j.positionFixed = function(el){$j(el).each(fixed(this)})return el;}$j.fn.positionFixed = $j.positionFixed(this)}o=this;o.sts={target : $j(el).css(‘position’,’fixed’),container : $j(window)}o.sts.currentCss = {top : o.sts.target.css(‘top’),right : o.sts.target.css(‘right’),bottom : o.sts.target.css(‘bottom’),left : o.sts.target.css(‘left’)}if(!o.ie6)return;o.bindEvent();}$j.extend(fixed.prototype,{ie6 : $.browser.msie && $.browser.version < 7.0,bindEvent : o=this;o.sts.target.css(‘position’,’absolute’)o.overRelative().initBasePos();o.sts.target.css(o.sts.basePos)o.sts.container.scroll(o.scrollEvent()).resize(o.resizeEvent());o.setPos();},overRelative : o=this;($j(this).css(‘position’)==’relative’)return this;})if(relative.size()>0)relative.after(o.sts.target)return o;},initBasePos : o=this;o.sts.basePos = {top: o.sts.target.offset().top – (o.sts.currentCss.top==’auto’?o.sts.container.scrollTop():0),left: o.sts.target.offset().left – (o.sts.currentCss.left==’auto’?o.sts.container.scrollLeft():0)}return o;},setPos : o=this;o.sts.target.css({top: o.sts.container.scrollTop() + o.sts.basePos.top,left: o.sts.container.scrollLeft() + o.sts.basePos.left})},scrollEvent : o=this;{o.setPos();}},resizeEvent : o=this;{setTimeout(function(){o.sts.target.css(o.sts.currentCss)o.initBasePos();o.setPos()},1)}}})})(jQuery){this.title=title;this.url=url;this.intro=intro;this.apearTime=1000;this.hideTime=500;this.delay=10000;//添加信息this.addInfo();//显示this.showDiv();//关闭this.closeDiv();}Pop.prototype={addInfo:function(){$(“#popTitle a”).attr(‘href’,this.url).html(this.title);$(“#popIntro”).html(this.intro);$(“#popMore a”).attr(‘href’,this.url);},showDiv:(!($.browser.msie && ($.browser.version == “6.0”) && !$.support.style)) {$(‘#pop’).slideDown(this.apearTime).delay(this.delay).fadeOut(400);;} else{//调用jquery.fixed.js,解决ie6不能用fixed$(‘#pop’).show();jQuery(function($j){$j(‘#pop’).positionFixed()})}},closeDiv:function(){$(“#popClose”).click(function(){$(‘#pop’).hide();});}}=”text/javascript” >//页面加载调用window.onload=Pop(“这里是标题,哈哈”,”http://www.xttblog.com”,”欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习!”);}===>温馨提示===>>=>=>=></body></html>

欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习!

上天完全是为了坚强你的意志,才在道路上设下重重的障碍。

jQuery实现网页右下角悬浮层提示

相关文章:

你感兴趣的文章:

标签云: