CSS+DIV+JS鼠标移动不同的导航 显示不同内容 - 前行小菜鸟 - ITeye技术网站
博客分类：
CSS+DIV+JS导航显示
平常大部分时间都在写后台代码。很少做前台界面的设计。这次，由于公司需要。做了一些界面设计方面的东西。
主要是用CSS+DIV+JS实现的一个导航。就是鼠标移动到不同的导航菜单上，显示不同的内容。
代码如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &&html xmlns=""&&head&&meta http-equiv="Content-Type" content="text/charset=gb2312" /&&title&简洁Tab&/title&&style type="text/css"&&!--body,div,ul,li{ padding:0; text-align:}body{ font:12px "宋体"; text-align: margin-top: 12 margin-bottom: 12}a:link{color:#00F;text-decoration:}a:visited {color: #00F;text-decoration:}a:hover {color: #c00;text-decoration:}ul{ list-style:}/*选项卡1*/#Tab1{width:460margin:0padding:0margin:0}/*选项卡2*/#Tab2{width:576margin:0padding:0margin:0}/*菜单class*/.Menubox {width:100%;background:url();height:28line-height:28}.Menubox ul{margin:0padding:0}.Menubox li{float:display:cursor:width:114text-align:color:#949694;font-weight:}.Menubox li.hover{padding:0background:#width:116border-left:1px solid #A8C29F;border-top:1px solid #A8C29F;border-right:1px solid #A8C29F;background:url();color:#739242;font-weight:height:27line-height:27}.Contentbox{clear:margin-top:0border:1px solid #A8C29F;border-top:height:181text-align:padding-top:8}.STYLE2 {font-size: 18px}--&&/style&&script&&!--/*第一种形式 第二种形式 更换显示样式*/function setTab(name,cursel,n){for(i=1;i&=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none";}}//--&&/script&&/head&&body&&br&&br&&div id="Tab1"&&div class="Menubox"&&ul& &li id="one1" onmouseover="setTab('one',1,4)" class="hover"& &img id="hide1" src="image/zhandian1.png" /& &/li&
&li id="one2" onmouseover="setTab('one',2,4)" &&img id="hide2" src="image/xianlu.png" /&&/li&
&li id="one3" onmouseover="setTab('one',3,4)"&&img src="image/huanc.png" name="hide3" id="hide3" /&&/li&
&li id="one4" onmouseover="setTab('one',4,4)"& &img id = "hide4" src="image/gps.png" /&&/li&
&/ul&&/div&
&div class="Contentbox"&
&div id="con_one_1" class="hover"&
&h3&站点查询&/h3&&br /&
&span class="STYLE2"&站点名称&/span&
&input type="text" name="text1" size="18" maxlength="20"&
&img src="image/search.png" name="hide4" vspace="10" id = "hide4" /&
&img src="image/重置.png" name="hide4" hspace="20" vspace="10" id = "hide4" /&
&/form& &/div&
&div id="con_one_2" style="display:none"& &form&
&h3& 线路查询 &/h3&&/br&
&span class="STYLE2"&线路名&/span&
&input type="text" name="text1" size="18" maxlength="20"&&/br&
&img id = "hide4" src="image/search.png" vspace="10"/&
&img id = "hide4" src="image/重置.png"
hspace="20"
vspace="10"/&
&/form& &/div& &div id="con_one_3" style="display:none"& &form& &h3&换乘查询&/h3&&/br& &span class="STYLE2"&起点&/span&&input type="text" name="text1" size="12" maxlength="20"&&/br& &span class="STYLE2"&终点&/span&&input type="text" name="text1" size="12" maxlength="20"&&/br& &span class="STYLE2"&乘车偏好：&/span&&select name="bus"&
&option value="1"&较快捷&/option&
&option value="2"&不换乘&/option&
&option value="3"&不步行&/option&
&option value="4"&多步行&/option&
&/select&&/br&
&img id = "hide4" src="image/search.png" vspace="10" /& &img id = "hide4" src="image/重置.png" hspace="20" vspace="10"/&
&/form& &/div& &div id="con_one_4" style="display:none"&
&h3&GPS候车查询&/h3&&/br&
&span class="STYLE2"&站点名称&/span&
&input type="text" name="text1" size="12" maxlength="20"&&/br&
&span class="STYLE2"&线路号&/span&&select name="lineCode" &
&option value="1"&B12&/option&
&option value="2"&45&/option&
&option value="3"&72&/option&
&option value="4"&68&/option&
&/select&&/br&
&span class="STYLE2"&开往方向&/span&
&select name="goWhere" &
&option value="1"&火车站&/option&
&option value="2"&科学大道与石楠路&/option&
&option value="3"&大谢村&/option&
&option value="4"&化工路&/option&
&/select&&/br&
&img id = "hide4" src="image/search.png" vspace="10"/&
&img id = "hide4" src="image/重置.png" hspace="20"
vspace="10"/&
&/div& &/div&&/div&&br&&/body&&/html&
显示界面：
浏览: 21586 次
来自: 河南
我编写了一个简短的程序，但是通过刷新可用端口：Enumerat ...
不错，比较实用！当滚动条往下移动时，div滚动到浏览器顶部就停止滚动了，当滚动条往上移动时，div又往下移动到初始位置-中国学网-中国IT综合门户网站
> 当滚动条往下移动时，div滚动到浏览器顶部就停止滚动了，当滚动条往上移动时，div又往下移动到初始位置
当滚动条往下移动时，div滚动到浏览器顶部就停止滚动了，当滚动条往上移动时，div又往下移动到初始位置
转载 编辑：李强
为了帮助网友解决“当滚动条往下移动时，div滚动到浏览器顶”相关的问题，中国学网通过互联网对“当滚动条往下移动时，div滚动到浏览器顶”相关的解决方案进行了整理,用户详细问题包括:RT,我想知道:当滚动条往下移动时，div滚动到浏览器顶部就停止滚动了，当滚动条往上移动时，div又往下移动到初始位置，具体解决方案如下：解决方案1：<解决方案2：你这ie6支持不？解决方案3：&!DOCTYPE&html&&&html&&&head&&title&&/title&&style&type=&text/css&&html,&body&{ width:100%; margin:0px& padding:0px&}.div1&{ height:2000}.div2&{ width:100%; height:35 background-color:#3399FF; margin-top:100}.div2_1{ position: width:100%; height:35 z-index:999; background-color:#3399FF; top:0 _position: _bottom: _top:expression(eval(document.documentElement.scrollTop));}*html{ background-image:url(about:blank); background-attachment:}&/style&&script&type=&text/javascript&&window.onscroll=function(){&&&&&var&t=document.documentElement.scrollTop||document.body.scrollT&&&&&&var&div2=document.getElementById(&div2&);&&&&&if(t&=&100){&&&&&&&&&div2.className&=&&div2_1&;&&&&}else{&&&&&&&&div2.className&=&&div2&;&&&&}&}&/script&&/head&&body&&div&class=&div1&& &div&id=&div2&&class=&div2&&&/div&&/div&&/body&&/html&解决方案4：虽然我已经做好了但还是要感谢你解决方案5：这个我知道，我主要是想自己写写通过对数据库的索引,我们还为您准备了：10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}这是一个兼容IE6的绝对定位的写法。始终处于浏览器底部。===========================================!IE7 : 能识别星号& * & 和 !important,当不能识别下划线&... 浏览器的,只有IE能认,这样就可以按照从 Firefox到IE8到IE7到IE6的兼容顺序来写。div{...===========================================不考虑IE6的话就比较简单,判断一下是否到底部,到了之后将这个div的position设置为fix... 而且在IE6中这个div在滚动时会不停晃动,解决方法是有的但是代价过高,看你的取舍===========================================可能会分3种情况: 1、浏览器的窗体滚动,这个估计每个浏览器都不一样,记得以前IE中... 有了这些基础后,推荐使用js进行控制,当scroll的时候把y轴的变化转换到x轴上,根据以...===========================================没看明白您的具体意图,DIV到顶部时固定什么意思?拉动滚动条可以使用window.scroll()来触发函数。自定义一个函数,判断$(document).scrollTop()值与div的top值,从而进行对应...=========================================== 好像是今天下午才出现的 我得情况跟你一模一样=========================================== 我以前也有过那样的问题,你装一下显卡驱动就好了=========================================== overflow 设为hidden啊!===========================================div或者就用你页面上已有的某个元素也行,当用户滚动的时候这个div相对于浏览器的顶部或底部的距离肯定会变化,然后你通过这个距离来判断用户浏览到当前页面的什么位置...=========================================== 显卡驱动从新装===========================================
本文欢迎转载，转载请注明：转载自中国学网： []
用户还关注
可能有帮助&%@ page contentType="text/ charset=gb2312" language="java" import="java.sql.*" errorPage="" %&
&!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/ charset=gb2312" /&
&title&无标题文档&/title&
&style type="text/css"&
ul, li {margin:0; padding:0;list-style:none}
.wp {
width: 440
height: 400
margin: 0px 0
border: 1px solid #CCCCCC;
background: #
}
.slider {
width: 400
padding: 0 20
top: 0;
}
.quan {
height: 50
border: 1px solid #CCCCCC;
padding: 1
}
.quan2 {
padding: 1
height: 50
border: 1px solid #339900;
}
.fl {float:left}
.slider li {padding: 20px 0; border-bottom: 1px dashed #overflow:width:400}
.slider p {font-size: 12margin:0;padding-left:68color:#333;line-height:20}
a:link {
text-decoration:
}
a:visited {
text-decoration:
}
a:hover {
text-decoration:
}
a:active {
text-decoration:
}
body {
margin-left: 0
margin-top: 0
margin-right: 0
margin-bottom: 0
}
&/style&
&script type="text/javascript"&
function H$(i) {return document.getElementById(i)}
function H$$(c, p) {return p.getElementsByTagName(c)}
var slider = function () {
function init (o) {
& this.id = o.
& this.at = o.auto ? o.auto : 3;
& this.o = 0;
& this.pos();
init.prototype = {
& pos : function () {
&& clearInterval(this.__b);
&& this.o = 0;
&& var el = H$(this.id), li = H$$('li', el), l = li.
&& var _t = li[l-1].offsetH
&& var cl = li[l-1].cloneNode(true);
&& cl.style.opacity = 0; cl.style.filter = 'alpha(opacity=0)';
&& el.insertBefore(cl, el.firstChild);
&& el.style.top = -_t + 'px';
&& this.anim();
& anim : function () {
&& var _this =
&& this.__a = setInterval(function(){_this.animH()}, 20);
& animH : function () {
&& var _t = parseInt(H$(this.id).style.top), _this =
&& if (_t &= -1) {
&&& clearInterval(this.__a);
&&& H$(this.id).style.top = 0;
&&& var list = H$$('li',H$(this.id));
&&& H$(this.id).removeChild(list[list.length-1]);
&&& this.__c = setInterval(function(){_this.animO()}, 20);
&&& //this.auto();
&& }else {
&&& var __t = Math.abs(_t) - Math.ceil(Math.abs(_t)*.07);
&&& H$(this.id).style.top = -__t + 'px';
& animO : function () {
&& this.o += 2;
&& if (this.o == 100) {
&&& clearInterval(this.__c);
&&& H$$('li',H$(this.id))[0].style.opacity = 1;
&&& H$$('li',H$(this.id))[0].style.filter = 'alpha(opacity=100)';
&&& this.auto();
&& }else {
&&& H$$('li',H$(this.id))[0].style.opacity = this.o/100;
&&& H$$('li',H$(this.id))[0].style.filter = 'alpha(opacity='+this.o+')';
& auto : function () {
&& var _this =
&& this.__b = setInterval(function(){_this.pos()}, this.at*1000);
&div class="wp"&&ul class="slider" id="slider" style="width:300px"&
&li&&br /&
& 信箱出现一张美丽的明信片&br /&
& 翠绿的山脚木屋袅袅的烟&br /&
& 但是我惊讶的却是背面&br /&
& 你熟悉的字迹竟以相隔多年&br /&
& 那一句话是你离开的玩笑话&br /&
&
&/li&
&li&搁在我心里灰尘&& 堆成了塔&br /&
& 你就这样的拨开了它&br /&
& 在信箱前我依旧是那个木偶&br /&
& 线等着你来拉&br /&
& 你说下辈子如果我还记得你☆☆&br /&
& 我们死也要在一起&br /&
& 像是陷入催眠的指令&br /&
& 我又开始昏迷不醒&br /&
& 好吧&&& 下辈子如果我还记得你☆☆&br /&&/li&
&li&你的誓言可别忘记&br /&
& 不过一张明信片而已&br /&
& 我已随它走入下个轮回里&br /&
& 那一句话是你离开的玩笑话&br /&
& 搁在我心里灰尘& 堆成了塔&br /&
& 你就这样的拨开了它&br /&
& 在那信箱前我依旧是那个木偶&br /&
& 线等着你来拉&br /&
& 你说下辈子如果我还记得你☆☆&br /&
& 我们死也要在一起&br /&&/li&
&li&像是陷入催眠指令&br /&
& 我已开始昏迷不醒&br /&
& 好吧&&& 下辈子如果我还记得你☆☆&br /&
& 你的誓言可别忘记&br /&
& 不过一张明信片而已&br /&
& 我已随它走入下个轮回里&br /&
& 迷失在我模糊的空气里&br /&
& 我在你字里行间寻找一线生机&br /&
& 你说下辈子如果我还记得你☆☆&br /&
& 我们死也要在一起&br /&
& 像是陷入催眠的指令&br /&
& 我已开始昏迷不醒&br /&&/li&
&li&好吧&&& 下辈子如果我还记得你☆☆&br /&
& 你的誓言可别忘记&br /&
& 不过一张明信片而已&br /&
& 我已随它走入下个轮回里&br /&
& 猪鼻插葱制作&br /&&/li&
&/ul&&/div&
&/body&&script type="text/javascript"&
var o=document.getElementById("slider");
new slider({id:'slider'});
问题补充：其实就是不清楚怎么让他停下来
问题补充：我也是在网上抄来的 但是就是美中不足
在div上添加两个事件
onMouseOver = aaa()&& onMouseOut = bb()
aaa就是定义鼠标移动到了div上 div内容停止滚动(至于怎么停止,你怎么让它动就的有办法让它停下来 呵呵).
bb就是鼠标离开了div 你得继续让div滚动了
看了一下你的代码，功能实现的很漂亮。
加一个鼠标事件，加上就好了！！！
已解决问题
未解决问题鼠标移动div中的其他元素中是触发了div的鼠标离开事件怎么破
[问题点数：40分，结帖人chenjiade]
鼠标移动div中的其他元素中是触发了div的鼠标离开事件怎么破
[问题点数：40分，结帖人chenjiade]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。3088人阅读
&html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&style type=&text/css&&
background-color:Y
border-style:
border-width:1
border-color:R
&script language=&javascript& type=&text/javascript&&
如果希望提示的div的左边界与上边界与显示的div重叠，那么需要删除文档头W3C标准
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN&
&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
function initEvent() {
var divArray = document.getElementsByTagName(&div&);
for (var i = 0; i & divArray. i++) {
divArray[i].onmouseover = createDivDetailO
无法用原始的div绑定鼠标移走的事件,因为明细的div的宽度长度都要大于原始div，
这样原始的div就被覆盖了，此时会自动触发onmouseout事件
//divArray[i].onmouseout = removeDivD
function createDivDetailOne() {
//保证divDetail div的唯一性
var divDetail = document.getElementById(&divDetail&);
if(divDetail)
document.body.removeChild(divDetail);
divObj = document.createElement(&div&);
divObj.className = &toopTip&;
divObj.setAttribute(&id&, &divDetail&);
divObj.style.position = &absolute&;
divObj.style.width = &200px&;
divObj.style.height = &100px&;
var triggerObj = window.event.srcE
divObj.style.top = triggerObj.offsetT
divObj.style.left = triggerObj.offsetL
divObj.innerHTML = triggerObj.innerT
document.body.appendChild(divObj);
//此时用于明细的div已经覆盖了原div，所以覆盖的div要进行事件的处理
document.getElementById(&divDetail&).onmouseout = function() {
if (!divObj) {
document.body.removeChild(divObj);
function removeDivDetail() {
var divObj = document.getElementById(&divDetail&);
if (!divObj) {
document.body.removeChild(divObj);
window.onload = initE
&div id=&divOne& style=&background-color: F width: 100 height: 100& &
Hello My Js World!
&div id=&divTwo& style=&background-color: A width: 100 height: 100px&&
Welcome to My Js World!
&div id=&divThree& style=&background-color: G width: 100 height: 100px&&
THIS IS My Js World!
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：373803次
积分：5611
积分：5611
排名：第2326名
原创：202篇
转载：77篇
评论：35条
(1)(2)(2)(2)(2)(8)(3)(2)(5)(3)(3)(4)(1)(2)(1)(1)(7)(7)(1)(5)(2)(7)(16)(7)(10)(7)(11)(5)(5)(4)(5)(4)(4)(4)(11)(39)(32)(22)(11)(12)