菜单过长时鼠标滑动效果js代码（鼠标拖动窗口总是延迟滑动）

本篇文章给大家谈谈菜单过长时鼠标滑动效果js代码，以及鼠标拖动窗口总是延迟滑动对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、js css 鼠标移入某个区域滑出一个框的效果怎么做？
• 2、js实现鼠标滑过显示二级菜单
• 3、关于javascript中菜单栏过长 实现左右箭头滑动项~

js css 鼠标移入某个区域滑出一个框的效果怎么做？

1、输入代码，其中button是鼠标要滑动的地方，滑过button时，class为content的内容就要显示出来，鼠标滑出去的时候，这块内容就需要重新隐藏起来。

2、把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。

3、来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。

4、把onmouseover和onmouseout两个事件作用在button上面，再写overShow()和overHide()两个 函数。可以看到在函数中通过改content的display属性来实现显示隐藏的效果。

5、在浏览器中就可以看到效果了。

js实现鼠标滑过显示二级菜单

鼠标滑过哪显示啥？

滑过 产品介绍 显示下面的子菜单？

onmouseover是鼠标移动到某元素执行的鼠标事件。

onmousemove是鼠标在某元素上移动执行的事件。

你先把这两个分清楚了，根据你的需求是

先获取你要鼠标滑过的元素 也就是产品介绍这个a元素,你给其设置一个id假如设置其为product

那么先获取他

var product=document.getElementById('product');

再获取你要显示的子菜单元素productInfo

var productInfo=document.getElementById('productInfo');

productInfo.style.display='none';//设置其隐藏，如果CSS里已经隐藏，此步可以省略。

然后设置其鼠标事件，应该选择onmouseover

product.onmouseover=function(){

productInfo.style.display='block'; //鼠标移动到product元素上让其子菜单显示。

}

product.onmouseout=function(){

productInfo.style.display='block'; //鼠标移出product元素上让其子菜单隐藏。

}

如果你要让每个子菜单都读取他的子菜单可以循环遍历实现。思路相同。

关于javascript中菜单栏过长 实现左右箭头滑动项~

style

ul{

margin:0px;

padding:0px;

}

li{

float:left;

cursor:pointer;

}

.map_div{

width:900px;

height:40px;

background-color:#000000;

overflow:hidden;

}

#dh_li{

width:800px;

height:40px;

background-color:#000000;

white-space:nowrap;

text-overflow:ellipsis;

overflow:hidden;

text-overflow:ellipsis;

display:block;

after:content:"...";

}

#dh_li li{

width:150px;

height:40px;

background-color:#000000;

color:#FF0000;

border-right:1px solid #FF0000;

text-align:center;

padding-top:10px;

overflow:hidden;

}

#dh_li li a:link{

color:#FF0000;

}

#dh_li li a:visited{

color:#FF0000;

}

#dh_li li a:hover{

color:#FF0000;

}

.dh_li{

width:50px;

height:40px;

font-size:20px;

font-weight:bold;

color:#FF0000;

text-align:center;

padding-top:10px;

background-color:#CCCCCC;

}

/style

body

div class="map_div"

ul

li id="dh_li"

div style="width:1500px;"

ul

lia href="#"网站首页/a/li

lia href="#"公司简介/a/li

lia href="#"产品展示/a/li

lia href="#"新闻咨询/a/li

lia href="#"热点咨询/a/li

lia href="#"合作伙伴/a/li

lia href="#"网站论坛/a/li

lia href="#"在线咨询/a/li

lia href="#"联系我们/a/li

/ul

/div

/li

li id="left_" class="dh_li" onclick="move_left();"←/li

li id="right_" class="dh_li" onclick="move_right();"→/li

/ul

/div

/body

script

var demo=document.getElementById("dh_li");

function move_right()

{

if(dh_li.scrollLeft=(1500-800))

dh_li.scrollLeft+=150;

}

function move_left()

{

if(dh_li.scrollLeft=0)

dh_li.scrollLeft-=150;

}

/script

菜单过长时鼠标滑动效果js代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于鼠标拖动窗口总是延迟滑动、菜单过长时鼠标滑动效果js代码的信息别忘了在本站进行查找喔。