正常访问状态! 设为首页 | 加入收藏夹 | 浏览历史  
  http://www.guosp.com
 碧海澜涛居
  海纳百川,有容乃大。壁立千刃,无欲则刚!
 
 
关键词:
  网站首页 | 关于本站 | 技术资料 | 美文日志 | 读书收藏 | 影视收藏 | 软件收藏 | 摄影相册| 留言板 
  技术资料 >> 网页特效 关闭(快捷键alt+C)
搜索标签: 控制 滚动
按钮控制的滚动版
[阅读次数:1291次]  [发布时间:2010年6月8日]

步 骤

第一步骤 :
在<head></head>中加入如下代码:<style type="text/css">

#divUpControl {position:absolute; left:150px;top:50px; width:320px;height:30px; z-index:1; text-align: right}

#divDownControl {position:absolute; left:150px; top:170px; width:320px;height:30px; z-index:1;text-align: right}

#divContainer {LEFT: 250px; VISIBILITY: hidden; OVERFLOW: hidden; WIDTH:270px; CLIP: rect(0px 270px 150px 0px); POSITION: absolute; TOP: 70px; HEIGHT: 100px}

#divContent {LEFT: 0px; POSITION: absolute; TOP: 0px}

-->

</style>

第二步骤 :
在<body>中加入如下代码:<body onLoad="InitialiseScrollableArea()" bgcolor="#FFFFFF" text="#000000">

第三步骤 :
在<body></body>中加入如下代码:<script language="JavaScript">

<!--

function verifyCompatibleBrowser(){

this.ver=navigator.appVersion

this.dom=document.getElementById?1:0

this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;

this.ie4=(document.all && !this.dom)?1:0;

this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

this.ns4=(document.layers && !this.dom)?1:0;

this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)

return this

}

bw=new verifyCompatibleBrowser()


var speed=50

var loop, timer


function ConstructObject(obj,nest){

nest=(!nest) ? '':'document.'+nest+'.'

this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;

this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;

this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight

this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight

this.up=MoveAreaUp;this.down=MoveAreaDown;

this.MoveArea=MoveArea; this.x; this.y;

this.obj = obj + "Object"

eval(this.obj + "=this")

return this

}

function MoveArea(x,y){

this.x=x;this.y=y

this.css.left=this.x

this.css.top=this.y

}

function MoveAreaDown(move){

if(this.y>-this.scrollHeight+objContainer.clipHeight){

this.MoveArea(0,this.y-move)

if(loop) setTimeout(this.obj+".down("+move+")",speed)

}

}

function MoveAreaUp(move){

if(this.y<0){

this.MoveArea(0,this.y-move)

if(loop) setTimeout(this.obj+".up("+move+")",speed)

}

}

function PerformScroll(speed){

if(initialised){

loop=true;

if(speed>0) objScroller.down(speed)

else objScroller.up(speed)

}

}

function CeaseScroll(){

loop=false

if(timer) clearTimeout(timer)

}

var initialised;

function InitialiseScrollableArea(){

objContainer=new ConstructObject('divContainer')

objScroller=new ConstructObject('divContent','divContainer')

objScroller.MoveArea(0,0)

objContainer.css.visibility='visible'

initialised=true;

}


function displayStatusMsg(msgStr) {

status=msgStr;

document.returnValue = true;

}


function preloadImages() {

var d=document; if(d.images){ if(!d.p) d.p=new Array();

var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}

}


function swapImgRestore() {

var i,x,a=document.sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}


function findObj(n, d) {

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document); return x;

}


function swapImage() {

var i,j=0,x,a=swapImage.arguments; document.sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=findObj(a[i]))!=null){document.sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>
<script language="JavaScript">

<!--

function reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.pgW=innerWidth; document.pgH=innerHeight; onresize=reloadPage; }}

else if (innerWidth!=document.pgW || innerHeight!=document.pgH) location.reload();

}

reloadPage(true);

// -->

</script>
</p>
<div id="divUpControl" style="width: 368; height: 30"> <a href="javascript:;" onMouseOver="PerformScroll(-7);displayStatusMsg('Scroll Up');swapImage('scroller_up_button','','../images1/up.gif',1);return document.returnValue" onMouseOut="CeaseScroll();swapImgRestore()"><img name="scroller_up_button" src="up.gif" border="0" alt="向上" width="18" height="18"></a></div>
<div id="divDownControl" style="width: 368; height: 30"> <a href="javascript:;" onMouseOver="PerformScroll(7);displayStatusMsg('Scroll Down');swapImage('scroller_down_button','','../images1/down.gif',1);return document.returnValue" onMouseOut="CeaseScroll();swapImgRestore()"><img name="scroller_down_button" src="down.gif" border="0" alt="向下" width="18" height="18"></a></div>
<div id="divContainer">
<div id="divContent" style="width: 249; height: 232"> <img src="gd35/n.gif" width="16" height="16"><font size="2" color="#FF0000"><a href="http://mzxhf.126.com">欢迎光临冰海家园</a><br>
<img src="gd35/n1.gif" width="12" height="11">本站将向您提供最新最多最精彩的网页制作技巧。<br>
<img src="gd35/n1.gif" width="12" height="11">我们这里的所有脚本都是一点一滴的积累起来的。<br>
<img src="gd35/n1.gif" width="12" height="11">如果你觉得不错的话,请把本站推荐给你的朋友。<br>
<img src="gd35/n.gif" width="16" height="16">本站主力站点:<a href="http://mzxhf.126.com"><br>http://mzxhf.126.com</a><br>
</font> </div>





本页地址: [复制地址]
返回顶部 关闭(快捷键alt+C)
评论统计(0条)| 我要评论
暂无评论内容!
我要评论 
我要评论: 带*部分需要填写
 姓名称呼: * 请填写您的姓名或呢称
联系方式: QQ,MSN,Email都可以,方便交流 (仅管理员可见)
 评论内容: * 不超过100字符,50汉字
验证码:
    
  推荐链接
  最近更新  
·Host 'XXX' is not allowed...
·Win2008或IIS7的文件上传大...
·IIS7.0上传文件限制的解决方...
·测试信息2015-03-11
·asp.net中处理图片
·ASP.NET之Web打印-终极解决...
·Asp.net下C#调用Word模版实...
·asp.net下将页面内容导入到...
·asp.net导出为pdf文件
·asp.net生成pdf文件
·FCKeditor 文本编辑器的使用...
·ASP.NET 将数据生成PDF
·asp.net2.0导出pdf文件完美...
·AspJpeg的安装与测试
·JS验证浏览器版本对IE11的支...
  热门浏览  
·IE8和IE9出现“此网页上的问...
·无线路由器密码破解,教你断...
·js替换所有回车换行符
·QQ/MSN在线交流代码
·IE弹出“中国工商银行防钓鱼...
·如何取消键盘上的一些快捷键...
·win7声音小的解决方法
·webdav漏洞的利用
·强制两端对齐的函数或者CSS...
·win7下成功安装sql server ...
·显示器分辨率调的过高导致电...
·天诺时空技术技术论坛
·js验证手机号码格式
·JS展开和收缩效果(二)
·本地计算机上的 MSSQLSERVE...
  碧海澜涛居
网站首页关于本站站长简介开发案例技术资料美文日志摄影相册读书收藏影视收藏留言板
版权所有:碧海澜涛 QQ:410436434 Email:shaopo_guo@163.com 苏ICP备15000526号
免责声明:本站为个人网站,站内所有文字、图片等各类资料均为个人兴趣爱好所收集,不用作任何商业用途,亦不保证资料的真实性,若有因浏览本站内容而导致的各类纠纷,本站也不承担任何责任。本站部分内容来自互联网,如有涉及到您的权益或隐私请联系站长解决。