顶置浮动内容条 - 动态内容 - 软晨网（RuanChen.com）

当前位置: 首页 > 实例教程 > 脚本特效 > 动态内容 > 顶置浮动内容条

动态内容: 文字/图片自动播放脚本; 顶置浮动内容条; 内容前后翻页; 内容折叠效果; 可滚动内容; 固定中间渐变提示效果; 垂片切换内容; 垂片图片内容切换; 模拟分页效果; 自动隐藏的广告框效果

实例搜索

关键字

动态内容中的顶置浮动内容条

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-07-27 浏览: 406 ::

收藏到网摘: n/a

文字/图片自动播放脚本内容前后翻页

顶置浮动内容条 - 软晨网（RuanChen.com）

演示效果：

第一步：在HEAD区域加入以下代码



<style type="text/css">
#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //设置0到1. 设置1的话 一次性显示手动关闭, 看过一次的以后不会再显示（COOKIE）
var startX = 30 //设置水平坐标
var startY = 5 //设置垂直坐标
var verticalpos="fromtop" //"fromtop"从上面出现 "frombottom" 从下面出现
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){	barheight=document.getElementById("topbar").offsetHeight	var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;	var d = document;	function ml(id){	var el=d.getElementById(id);	if (!persistclose || persistclose && get_cookie("remainclosed")=="")	el.style.visibility="visible"	if(d.layers)el.style=el;	el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};	el.x = startX;	if (verticalpos=="fromtop")	el.y = startY;	else{	el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;	el.y -= startY;	}	return el;	}	window.stayTopLeft=function(){	if (verticalpos=="fromtop"){	var pY = ns ? pageYOffset : iecompattest().scrollTop;	ftlObj.y += (pY + startY - ftlObj.y)/8;	}	else{	var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;	ftlObj.y += (pY - startY - ftlObj.y)/8;	}	ftlObj.sP(ftlObj.x, ftlObj.y);	setTimeout("stayTopLeft()", 10);	}	ftlObj = ml("topbar");	stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

第二步：在BODY区域放显示用的代码



<div id="topbar">
<a href="" onClick="closebar(); return false"><img src="/example/files/b/close.gif" border="0" /></a>
你的内容在这。。。
</div>

第三步：下载图片

文字/图片自动播放脚本内容前后翻页

动态内容 中的 顶置浮动内容条

演示效果：

第一步：在HEAD区域加入以下代码

第二步：在BODY区域放显示用的代码

第三步：下载图片

评论 (0) All

动态内容中的顶置浮动内容条