社区
JavaScript
帖子详情
●==晚辈求教网页按钮的问题(内详)==●
vcfs
2002-07-19 10:33:25
现在有个问题晚辈要请教:在一个网页的最上面有几个按钮,分别是背景音乐的播放和暂停按钮.但是如果网页太长的话,当用户在看网页下面的时候就看不到这几个按钮了,有什么好的方法吗?我有一个思路:把按钮做在一个层上并始终处于浏览器的某个位置!但是我做不出来,麻烦你给帮忙!
...全文
49
8
打赏
收藏
●==晚辈求教网页按钮的问题(内详)==●
现在有个问题晚辈要请教:在一个网页的最上面有几个按钮,分别是背景音乐的播放和暂停按钮.但是如果网页太长的话,当用户在看网页下面的时候就看不到这几个按钮了,有什么好的方法吗?我有一个思路:把按钮做在一个层上并始终处于浏览器的某个位置!但是我做不出来,麻烦你给帮忙!
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
8 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
minitigger
2002-07-19
打赏
举报
回复
<html>
<body onscroll=document.recalc(true)>
<div style="height:1;" ><img id="oMove" style="left:expression(document.body.scrollLeft);top:expression(document.body.scrollTop+100);position:absolute"
src="111.gif">
;alksjdf</div>
<p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p>
<p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p>
<p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p>
<p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p>
<p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p><p>asdfasdfasdfasdf</p>
</body>
</html>
seabell
2002-07-19
打赏
举报
回复
<body style="margin:0; overflow:hidden">
<div style="position: absolute ; top: 0;background:#eeeeee;width:100%"><input type=button value=play><input type=button value=pause></div>
<div style="overflow:auto; width:100%; height:100%">
<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack
<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack
<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack
</div>
seabell
2002-07-19
打赏
举报
回复
<body style="margin:0; overflow:hidden">
<div style="position: absolute ; top: 0;background:#eeeeee;width:100%"><input type=button value=play><input type=button value=pause></div>
<div style="overflow:auto; width:100%; height:100%">
<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack
<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack
<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack
</div>
meizz
2002-07-19
打赏
举报
回复
哦!还没有人给出代码吗?那我就拿出一段我收藏的代码给你:
其中你把图片换成你的按钮就行了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>跟随屏幕移动的图像</title>
<style type="text/css">
#floater {position: absolute;left: 500;top: 146;width: 125;visibility: visible;z-index: 10;}
</style></head>
<body>
<div ID="floater" style="left: 490px; top: 158px">
<p align="center"><img SRC="http://www.csdn.net/images/csdn.gif" alt="图片显示的文字"><br></p>
<table><tr><td height=1000></td></tr></table></div>
<script LANGUAGE="JavaScript"><!--
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.left += percent;
lastScrollX = lastScrollX + percent;
}
}
<!-- /STALKER CODE -->
<!-- DRAG DROP CODE -->
function checkFocus(x,y) {
stalkerx = document.floater.pageX;
stalkery = document.floater.pageY;
stalkerwidth = document.floater.clip.width;
stalkerheight = document.floater.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("floater") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.floater;
StalkerTouchedX = e.pageX-document.floater.pageX;
StalkerTouchedY = e.pageY-document.floater.pageY;
}
}
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;
}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}
<!-- DRAG DROP CODE -->
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
// --></script>
</body>
</html>
seabell
2002-07-19
打赏
举报
回复
<body style="margin:0; overflow:hidden">
<div style="position: absolute ; top: 0;background:#eeeeee;width:100%"><input type=button value=play><input type=button value=pause></div>
<div style="overflow:auto; width:100%; height:100%">
<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack
<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack
<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack<p>ballack
tttk
2002-07-19
打赏
举报
回复
http://campo.3322.net/index.htm,你会找到答案。
tttk
2002-07-19
打赏
举报
回复
废话少说,直接给你一个好的地址:http://campo.3322.net/index.htm, 你会找到答案。
祝顺利。
blues-star
2002-07-19
打赏
举报
回复
<input id=go type=button value=go onclick="this.disabled = true">
<input id=stop type=button value=stop onclick="go.disabled = false">
晚辈
对长辈的礼仪.pdf
晚辈
对长辈的礼仪.pdf
祝福
晚辈
生日短信.doc
长辈对
晚辈
的生日祝福,承载着家庭的温暖和对
晚辈
未来的美好期许。本文档《祝福
晚辈
生日短信.doc》精心挑选了一系列温馨的祝福语句,旨在帮助长辈们用最恰当的语言表达他们的情感和祝福。 在撰写祝福短信时,情感的...
长辈送给
晚辈
生日祝福语.doc
【文档标题】与【描述】均提及“长辈送给
晚辈
生日祝福语”,这表明文档主要包含的是一些适合长辈对
晚辈
表达生日祝福的语言。这些祝福语充满了关怀、期待和美好的祝愿,旨在传达长辈对
晚辈
的爱护和对他们在新的一岁里...
晚辈
生日祝福短信、祝福语.doc
在人生的每一个特别日子,特别是
晚辈
的生日,长辈们都希望以一种温馨而真挚的方式表达自己的祝福与关爱。这些生日祝福语不仅是言语的表达,更是一份份蕴含深厚情感的礼物。
晚辈
的生日祝福短信和祝福语,承载着长辈对...
端午节送给
晚辈
祝福寄语
总之,长辈们通过各种形式的祝福,不仅表达对
晚辈
的关爱之情,更希望他们能够继承和发扬中华优秀传统文化,让这些美好的祝福成为
晚辈
们成长道路上的助力。在快乐祥和的节日氛围中,
晚辈
们也应当积极回应长辈的祝福,...
JavaScript
87,996
社区成员
224,693
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章