.aa{width:100pxheight:20pxboder:solid 1px #f00}//定义搜索框的大小高度以及边框颜色。
思路是：
放大镜图标用个img写进来或者用其它标签用CSS做背景也可以；
下拉导航这种效果系统的Select下拉是最容易想到的，但是别想着用它做，，原因很简单，做不到的，，这个必须借助JS辅助来解决！
虽然没分,还是把我从别处抄来的代码转给你吧:<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>test</title>
</head>
<body style="font-size: 10pt">
<script language="JavaScript">
var NS4 = (document.layers)// Which browser?
var IE4 = (document.all)
var win = window// window to search.
var n = 0
function findInPage(str) {
var txt, i, found
if (str == "")
return false
// Find next occurance of the given string on the page, wrap around to the
// start of the page if necessary.
if (NS4) {
// Look for match starting at the current point. If not found, rewind
// back to the first match.
if (!win.find(str))
while(win.find(str, false, true))
n++
else
n++
// If not found in either direction, give message.
if (n == 0)
alert("本页没有查到.")
}
if (IE4) {
txt = win.document.body.createTextRange()
// Find the nth match from the top of the page.
for (i = 0i <= n &&(found = txt.findText(str)) != falsei++) {
txt.moveStart("character", 1)
txt.moveEnd("textedit")
}
// If found, mark it and scroll it into view.
if (found) {
txt.moveStart("character", -1)
txt.findText(str)
txt.select()
txt.scrollIntoView()
n++
}
// Otherwise, start over at the top of the page and find first match.
else {
if (n >0) {
n = 0
findInPage(str)
}
// Not found anywhere, give message.
else
alert("本页没有查到此题目，请尝试用下百度的搜索引擎在网上查下.")
}
}
return false
}
</script>
<div id="floater" style="position:absolutewidth:95pxheight:105pxz-index:10visibility: visibleright: 10pxtop: 13px">
<div align="center" style="width: 158height: 245">
<script language=JavaScript>
self.onError=null
currentX = currentY = 0
whichIt = null
lastScrollX = 0lastScrollY = 0
NS = (document.layers) ? 1 : 0
IE = (document.all) ? 1: 0
<!-- STALKER CODE -->
function heartBeat() {
if(IE) { diffY = document.body.scrollTopdiffX = document.body.scrollLeft}
if(NS) { diffY = self.pageYOffsetdiffX = 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 = newXcurrentY = 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>
<form name="search" onSubmit="return findInPage(this.string.value)">
<font size=3><font color="#FF0000"><br>
请输入关键字：<br>
</font><br>
<input name="string" type="text" size=10 onChange="n = 0"><br>
</font><br>
<input type="submit" value="查找">
<input type="submit" value="继续查"><br>
</form>
</div>
</div>
<script language=JavaScript>
self.onError=null
currentX = currentY = 0
whichIt = null
lastScrollX = 0lastScrollY = 0
NS = (document.layers) ? 1 : 0
IE = (document.all) ? 1: 0
<!-- STALKER CODE -->
function heartBeat() {
if(IE) { diffY = document.body.scrollTopdiffX = document.body.scrollLeft}
if(NS) { diffY = self.pageYOffsetdiffX = 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 = newXcurrentY = 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>
<p><b>题库 </b></p>
<p>请在右边的搜索框中查找在此页面查找<br>
<br>
"馒头是谁发明的?","诸葛亮",<br>
"“蚕蚁”是蚂蚁还是蚕？","蚕",<br>
"古诗的体制称为“风雅颂”，其中“颂”是指：","宗庙乐歌",<br>
" 目前，唯有哪个金融机构可在县一级的地方设立分支机构？","中国农业银行",<br>
"东汉末年我国的一位杰出的医学家是：","华佗",<br>
"离地面越高空气越稀薄是因为：","空气受到地球引力的影响",<br>
</P>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）