请问右下角悬浮窗如何实现？

spewen 2009-09-10 02:36:31
请问像太平洋汽车网（http://www.pcauto.com.cn/）右下角的悬浮窗（带展开和收缩）如何实现？有代码最好，谢谢！
...全文
557 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
MR丶CHAN 2009-09-13
  • 打赏
  • 举报
 回复
mark & up
ChinaXtHuLang 2009-09-13
  • 打赏
  • 举报
 回复
3楼的代码不符合W3C。。。
我改下了。嘿嘿。。
<!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=gb2312" />

<title>右下角悬浮窗</title>

<script language="JavaScript">

var divTop,

divLeft,

divWidth,

divHeight,

docHeight,

docWidth,

objTimer;

function getMsg()

 {

    divHeight = parseInt(document.getElementById("eMeng").offsetHeight, 10);

    divWidth = parseInt(document.getElementById("eMeng").offsetWidth, 10);

    docWidth = document.documentElement.clientWidth;

    docHeight = document.documentElement.clientHeight;

    document.getElementById("eMeng").style.top = docHeight + parseInt(document.documentElement.scrollTop, 10) + 5;

    document.getElementById("eMeng").style.left = docWidth + parseInt(document.documentElement.scrollLeft, 10) - divWidth;

    document.getElementById("eMeng").style.visibility = "visible";

    objTimer = window.setInterval("moveDiv()", 10);



}



function resizeDiv()

 {

    divHeight = parseInt(document.getElementById("eMeng").offsetHeight, 10);

    divWidth = parseInt(document.getElementById("eMeng").offsetWidth, 10);

    docWidth = document.documentElement.clientWidth;

    docHeight = document.documentElement.clientHeight;

    document.getElementById("eMeng").style.top = docHeight + parseInt(document.documentElement.scrollTop, 10) - divHeight;

    document.getElementById("eMeng").style.left = docWidth + parseInt(document.documentElement.scrollLeft, 10) - divWidth;



}



function moveDiv()

 {

    if (parseInt(document.getElementById("eMeng").style.top, 10) < (docHeight - divHeight + parseInt(document.documentElement.scrollTop, 10)))

    {

        window.clearInterval(objTimer);

        return;



    }

    divTop = parseInt(document.getElementById("eMeng").style.top, 10);

    document.getElementById("eMeng").style.top = divTop - 2;



}

function closeDiv()

 {

    document.getElementById('eMeng').style.visibility = "hidden";

    if (objTimer) window.clearInterval(objTimer);



}

window.onload = getMsg;

window.onresize = resizeDiv;

window.onscroll = resizeDiv;

</script>

</head>



<body>

<div id="eMeng" style="border:1px solid #7788CC;visibility:hidden;position:absolute;top:0px;left:0px;">

  <div style="background-color:#7788FF;width:250px;height:20px;">

    <div style="font-size:12px;text-align:right;"><a href="javascript:void(0)" onclick="closeDiv()" title="关 闭">关 闭</a></div>

  </div>

  <div style="background-color:#D5E7FD;width:250px;height:130px;font-size:12px;">

  <center><br /><br /><br />网络编程的世界：<br />没有你做不到的，<br />只有你想不到的。</center>

  </div>

</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>

</html>
s10275858 2009-09-11
  • 打赏
  • 举报
 回复
好贴，标记一个，慢慢学习
lbcleo 2009-09-11
  • 打赏
  • 举报
 回复
3楼的方法不可以吗
hongzi001179 2009-09-11
  • 打赏
  • 举报
 回复
记下
spewen 2009-09-11
  • 打赏
  • 举报
 回复
大家都不清楚吗？
spewen 2009-09-10
  • 打赏
  • 举报
 回复
要到源代码了，但是有几个地方看不懂，麻烦高手给解释一下


var area_lmt_tag = [

	{'city':'北京','url':'http://www.pcauto.com.cn/qcbj/open/bj/'},

	{'city':'东莞','url':'http://www.pcauto.com.cn/qcbj/open/dg/'},

	{'city':'中山','url':'http://www.pcauto.com.cn/qcbj/open/zhongshan/'},

	{'city':'汕头','url':'http://www.pcauto.com.cn/qcbj/open/yd/'},

	{'city':'汕尾','url':'http://www.pcauto.com.cn/qcbj/open/yd/'},

	{'city':'潮汕','url':'http://www.pcauto.com.cn/qcbj/open/yd/'},

	{'city':'潮州','url':'http://www.pcauto.com.cn/qcbj/open/yd/'},

	{'city':'揭阳','url':'http://www.pcauto.com.cn/qcbj/open/yd/'},

	{'city':'惠州','url':'http://www.pcauto.com.cn/qcbj/open/huizhou/'},

	{'city':'上海','url':'http://www.pcauto.com.cn/qcbj/open/sh/'},

	{'city':'深圳','url':'http://www.pcauto.com.cn/qcbj/open/sz/'},

	{'city':'香港','url':'http://www.pcauto.com.cn/qcbj/open/hk/'},

	{'city':'南昌','url':'http://www.pcauto.com.cn/qcbj/open/nc/'},

	{'city':'大连','url':'http://www.pcauto.com.cn/qcbj/open/dalian/'},

	{'city':'广西','url':'http://www.pcauto.com.cn/qcbj/open/nanning/'},

	{'city':'哈尔滨','url':'http://www.pcauto.com.cn/qcbj/open/heb/'},

	{'city':'佛山','url':'http://www.pcauto.com.cn/qcbj/open/fs/'},

	{'city':'南京','url':'http://www.pcauto.com.cn/qcbj/open/nj/'},

	{'city':'苏州','url':'http://www.pcauto.com.cn/qcbj/open/szhou/'},

	{'city':'昆明','url':'http://www.pcauto.com.cn/qcbj/open/km/'},

	{'city':'长春','url':'http://www.pcauto.com.cn/qcbj/open/changchun/'},

	{'city':'武汉','url':'http://www.pcauto.com.cn/qcbj/open/wh/'},

	{'city':'沈阳','url':'http://www.pcauto.com.cn/qcbj/open/sy/'},

	{'city':'山东','url':'http://www.pcauto.com.cn/qcbj/open/jn/'},

	{'city':'重庆','url':'http://www.pcauto.com.cn/qcbj/open/cq/'},

	{'city':'湖南','url':'http://www.pcauto.com.cn/qcbj/open/cs/'},

	{'city':'浙江','url':'http://www.pcauto.com.cn/qcbj/open/zj/'},

	{'city':'西安','url':'http://www.pcauto.com.cn/qcbj/open/xa/'},

	{'city':'四川','url':'http://www.pcauto.com.cn/qcbj/open/sc/'},

	{'city':'福建','url':'http://www.pcauto.com.cn/qcbj/open/fj/'},

	{'city':'江苏','url':'http://www.pcauto.com.cn/qcbj/open/nj/'},

	{'city':'甘肃','url':'http://www.pcauto.com.cn/qcbj/open/lz/'},

	{'city':'广州','url':'http://www.pcauto.com.cn/qcbj/open/gz/'},

	{'city':'广东','url':'http://www.pcauto.com.cn/qcbj/open/gz/'},

	{'city':'海南','url':'http://www.pcauto.com.cn/qcbj/open/haikou/'},

	{'city':'郑州','url':'http://www.pcauto.com.cn/qcbj/open/zz/'},

	{'city':'洛阳','url':'http://www.pcauto.com.cn/qcbj/open/ly/'},

	{'city':'天津','url':'http://www.pcauto.com.cn/qcbj/open/tj/'},

	{'city':'杭州','url':'http://www.pcauto.com.cn/qcbj/open/hz/'},

	{'city':'宁波','url':'http://www.pcauto.com.cn/qcbj/open/nb/'},

	{'city':'石家庄','url':'http://www.pcauto.com.cn/qcbj/open/sjz/'},

	{'city':'保定','url':'http://www.pcauto.com.cn/qcbj/open/bd/'},

	{'city':'太原','url':'http://www.pcauto.com.cn/qcbj/open/ty/'}

];

var lmt_thisArea = {'city':'北京','url':'http://www.pcauto.com.cn/qcbj/open/bj/'};/*初始化当前城市显示的窗口，没有车市的一律显示北京的；*/

var PClocation = unescape(getCookie('PClocation'));//存储ip判断的地区字段

function setCookie(name, value, expires, path, domain, secure){

	var expires = new Date();

	expires.setTime(expires.getTime() + 24*60*60*1000);

	var domain=".pcauto.com.cn"

	var s = name + "=" + escape(value) +

	((expires) ? "; expires=" + expires.toGMTString(): "") +

	((path) ? "; path=" + path : "") +

	((domain) ? "; domain=" + domain : "") +

	((secure) ? "; secure" : "");

	document.cookie=s;

}



function getCookie(name){

	return unescape(document.cookie.replace(new RegExp(".*(?:^|; )"+name+"=([^;]*).*|.*"),"$1"));

}



function IPCallBack(location){

	PClocation = location;

	setCookie('PClocation',escape(location));

}



function needJS(fn,src,callback) { callback=callback||function(){}; if(fn) return callback(false);//功能早已载入

    var scripts=window.__needJS__||(window.__needJS__=[]); var script=scripts[src]||(scripts[src]={loaded:false,callbacks:[]}); //取得全局加载队列中的目标项

    if(script.loaded) return callback(false); var cbs=script.callbacks; cbs.push(callback); //cbs: 回调函数列表

    if(cbs.length==1) { var js=document.createElement("script");

        js.onload=js.onreadystatechange=function(){ var st=js.readyState; if(st&&st!="loaded"&&st!="complete") return;

            script.loaded = true; for(var i=0; i<cbs.length; i++) cbs[i](true);

        }; js.src=src; document.getElementsByTagName("head")[0].appendChild(js);

}   } //needJS()



//关闭,最小化,最大化

function showDiv(innerCall){

	if(document.getElementById('PcPoPmarket')==null)return;

	if(Number(getCookie("divStatus"))==1 && !!innerCall){

		closeDiv();

	}else if (Number(getCookie("divStatus"))==2 && !!innerCall)

	{

		hideDiv();

	}else{

		document.getElementById('PcPoPmarket').style.height = 311+'px';

		document.getElementById('showvod').style.display = 'none';

		document.getElementById('hidevod').style.display = 'block';

	}

}



function hideDiv(innerCall){

	if(document.getElementById('PcPoPmarket')==null)return;

	document.getElementById('PcPoPmarket').style.height = 29 + 'px';

	document.getElementById('hidevod').style.display = 'none';

	document.getElementById('showvod').style.display = 'block';

	if(!innerCall)setCookie("divStatus",2);

}



function closeDiv(innerCall){

	if(document.getElementById('PcPoPmarket')==null)return;

	document.getElementById('PcPoPmarket').style.display = 'none';

	if(!innerCall)setCookie("divStatus",1);

}



document.write('<span id="tmpAreaLmtDiv"></span>');

//writeAreaLmtDiv(area_lmt_tag);



function writeAreaLmtDiv(){

	var s="";

	try{

		//以下是为了兼容 xhtml1.0 和 html4两种情况 / ie6 ie7 ff 的兼容用hack

		if(document.compatMode && document.compatMode != 'BackCompat'){

		s+=('<div style="z-index:9;right:0;bottom:0;height:311px;width:290px;overflow:hidden;position:fixed;'+(/MSIE 7/.test(navigator.appVersion)?'':'_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);')+'" id="PcPoPmarket">');

		}else {

		s+=('<div style="z-index:9;right:0;bottom:0;height:311px;width:290px;overflow:hidden;position:fixed;*position:absolute;*top:expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-this.style.pixelHeight);" id="PcPoPmarket" >');

		}

		s+=('<div style="z-index:9;position: absolute;width:290px;height:30px;overflow:hidden;background:transparent;">');

		s+=('<span style="cursor:pointer;float:left;clear:none;width:123px;height:14px;overflow:hidden;margin:10px 5px;"></span>');

		s+=('<span title="关闭" style="background-image:url(http://www1.pcauto.com.cn/global/2008/images/lmt/lmtclose.gif);cursor:pointer;float:right;clear:none;width:24px;height:16px;margin:2px 0 0 0;" onclick="closeDiv()"></span>');

		s+=('<span title="展开" style="background-image:url(http://www1.pcauto.com.cn/global/2008/images/lmt/lmtbig.gif);cursor:pointer;float:right;width:22px;height:16px;overflow:hidden;clear:none;display:none;margin:2px 1px 0 0;" onclick="showDiv()" id="showvod"></span>');

		s+=('<span title="缩小" style="background-image:url(http://www1.pcauto.com.cn/global/2008/images/lmt/lmtsmall.gif);cursor:pointer;float:right;overflow:hidden;width:22px;height:16px;clear:none;display:bolck;margin:2px 1px 0 0;" onclick="hideDiv()" id="hidevod"></span>');

		s+=('</div>');

		s+=('<iframe scrolling="no" frameborder="0" width="290" height="311" src="'+lmt_thisArea.url+'">-</iframe>');

		s+=('</div>');

		document.getElementById('tmpAreaLmtDiv').innerHTML = s;

		setTimeout('hideDiv(true);', 8000);

	}catch(err){}

	showDiv(true);

}



function playLmtAreaWindow(locationArray,callback){

	for(i=0;i<locationArray.length;i++){

		if (PClocation.indexOf(locationArray[i].city) >= 0){

			lmt_thisArea = locationArray[i];

			writeAreaLmtDiv();

			break;

		}

	}

}



//执行

if(PClocation==null || PClocation.length==0){

	needJS(null,'http://whois.pconline.com.cn/jsFunction.jsp',function(){playLmtAreaWindow(area_lmt_tag,writeAreaLmtDiv)});

}else{

	playLmtAreaWindow(area_lmt_tag,writeAreaLmtDiv);

}


如：function playLmtAreaWindow；

function needJS(fn,src,callback)；

和if(PClocation==null || PClocation.length==0){
needJS(null,'http://whois.pconline.com.cn/jsFunction.jsp',function(){playLmtAreaWindow(area_lmt_tag,writeAreaLmtDiv)});
}else{
playLmtAreaWindow(area_lmt_tag,writeAreaLmtDiv);
}
这几句给解释一下，我对js不是很熟，谢谢
西安风影 2009-09-10
  • 打赏
  • 举报
 回复 
<html>

<script language="JavaScript">

<!--

var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer;

function getMsg()

{

divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10);

divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10);

docWidth = document.body.clientWidth;

docHeight = document.body.clientHeight;

document.getElementById("eMeng").style.top = docHeight + parseInt(document.body.scrollTop,10) + 5;

document.getElementById("eMeng").style.left = docWidth + parseInt(document.body.scrollLeft,10) - divWidth ;

document.getElementById("eMeng").style.visibility="visible";

objTimer = window.setInterval("moveDiv()",10);

}



function resizeDiv()

{

divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10);

divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10);

docWidth = document.body.clientWidth;

docHeight = document.body.clientHeight;

document.getElementById("eMeng").style.top = docHeight + parseInt(document.body.scrollTop,10) - divHeight ;

document.getElementById("eMeng").style.left = docWidth + parseInt(document.body.scrollLeft,10) - divWidth;

}



function moveDiv()

{

if(parseInt(document.getElementById("eMeng").style.top,10) < (docHeight - divHeight + parseInt(document.body.scrollTop,10)))

{

window.clearInterval(objTimer);

return;

}

divTop = parseInt(document.getElementById("eMeng").style.top,10);

document.getElementById("eMeng").style.top = divTop - 2;

}

function closeDiv()

{

document.getElementById('eMeng').style.visibility="hidden";

if(objTimer) window.clearInterval(objTimer);

}

window.onload = getMsg;

window.onresize = resizeDiv;

window.onscroll = resizeDiv;

-->

</script>

<body>

<div id="eMeng" style="border:1px solid #7788CC;visibility:hidden;position:absolute;top:0px;left:0px;height:150px;width:260px;">

  <div style="background-color:#7788FF;width:260px;height:20px;">

    <div style="cursor:hand;font-size:12px;font-weight:bold;text-align:right;" onclick="closeDiv()">×</div>

  </div>

  <div style="border:3px solid #BBCCFF;background-color:#D5E7FD;width:260px;height:130px;">

  <center>

    <span>HelloWorld</span>

  </center>

  </div>

</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>

</html>
sumjor 2009-09-10
  • 打赏
  • 举报
 回复
类似于弹出广告 网上很多这样的JS代码
pig510520 2009-09-10
  • 打赏
  • 举报
 回复
网上搜个js 类似于弹出qq消息之类的
Qt实现仿qq右下角浮动弹窗
Qt实现仿qq右下角浮动弹窗，已封装，把MsgWidget文件夹拷贝到其他项目即可使用；可在多个系统上编译运行，windows、Linux、Mac OS X上测试通过。
jquery右下角提示框插件
jquery右下角提示框插件,很好用，有类似需求的同志可以下载下来看一下
jquery 实现页面右下角飘出窗口，从而达到广告的效果
用jquery 实现页面右下角飘出窗口，从而达到广告的效果
jQuery网页右下角弹出视频
网页右下角弹出视频jQuery网页右下角弹出视频jQuery网页右下角弹出视频jQuery
jquery实现的随机显示不同样式的网站右下角广告窗口带关闭按钮悬浮特效源码.zip
jquery实现的随机显示不同样式的网站右下角广告窗口带关闭按钮悬浮特效源码.zip
ASP

28,391

社区成员

357,060

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章