jQuery仿Discuz右下角悬浮层提示滑动滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿Discuz右下角悬浮层提示滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>jQuery仿Discuz右下角悬浮层提示</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

/* pop */
#pop{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:12px;position:fixed;right:10px;bottom:10px;}
#popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;}
#popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;}
#popHead #popClose{position:absolute;right:10px;top:1px;}
#popHead a#popClose:hover{color:#f00;cursor:pointer;}
#popContent{padding:5px 10px;}
#popTitle a{line-height:24px;font-size:14px;font-family:'微软雅黑';color:#333;font-weight:bold;text-decoration:none;}
#popTitle a:hover{color:#f60;}
#popIntro{text-indent:24px;line-height:160%;margin:5px 0;color:#666;}
#popMore{text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;}
#popMore a{color:#f60;}
#popMore a:hover{color:#f00;}
</style>

</head>
<body style="height:1200px;">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/yanue.pop.js"></script>
<script type="text/javascript" >
//记得加载jquery
//使用参数：1.标题，2.链接地址，3.内容简介
window.onload=function(){
	var pop=new Pop("这里是标题，哈哈","#","请输入你的内容简介，这里是内容简介.请输入你的内容简介，这里是内容简介.请输入你的内容简介，这里是内容简介");
}
</script>

<div id="pop" style="display:none;">

	<div id="popHead"> <a id="popClose" title="关闭">关闭</a>
		<h2>温馨提示</h2>
	</div>
	<div id="popContent">
		<dl>
			<dt id="popTitle"><a href="#" target="_blank">这里是标题</a></dt>
			<dd id="popIntro">这里是内容简介</dd>
		</dl>
		<p id="popMore"><a href="#" target="_blank">查看 »</a></p>
	</div>
</div>
</body>
</html>

JS代码(yanue.pop.js):

//兼容ie6的fixed代码//jQuery(function($j){
	//$j('#pop').positionFixed()//}
)(function($j){
	$j.positionFixed = function(el){
	$j(el).each(function(){
	new fixed(this)}
) return el;
}
$j.fn.positionFixed = function(){
	return $j.positionFixed(this)}
var fixed = $j.positionFixed.impl = function(el){
	var 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:function(){
	var 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:function(){
	var o=this;
	var relative = o.sts.target.parents().filter(function(){
	if($j(this).css('position')=='relative')return this;
}
) if(relative.size()>0)relative.after(o.sts.target) return o;
}
,initBasePos:function(){
	var 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:function(){
	var 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:function(){
	var o=this;
	return function(){
	o.setPos();
}
}
,resizeEvent:function(){
	var o=this;
	return function(){
	setTimeout(function(){
	o.sts.target.css(o.sts.currentCss) o.initBasePos();
	o.setPos()}
,1)}
}
}
)}
)(jQuery)function Pop(title,url,intro){
	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:function(time){
	if (!($.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();
}
);
}
}

附件:下载该文件资源,减少时间成本(增值服务)