字随鼠标移动
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.d1{
position: absolute;
left: 30px;
top: 20px;
}
</style>
</head>
<body>
<font color="red" class="d1" id="d1">hello</font>
<script type="text/javascript">
var d1_node=document.getElementById("d1");
document.onmousemove=function(e){
var e=e?e:window.event;
d1_node.style.left=e.clientX;
d1_node.style.top=e.clientY;
}
</script>
</body>
</html>
伸缩菜单：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
li{ list-style:none}
ul li ul{display:none;}
.view{display:block;}
.noview{display:none;}
</style>
</head>
<body onload="demo()">
<ul id="d1">
<li>
<a href="#">一级菜单01</a>
<ul>
<li>一级菜单01_1</li>
<li>一级菜单01_2</li>
</ul>
</li>
<li><a href="#">一级菜单02</a></li>
<ul>
<li>一级菜单02_1</li>
<li>一级菜单02_2</li>
</ul>
<li>
<a href="#">一级菜单03</a>
<ul>
<li>一级菜单03_1</li>
<li>一级菜单03_2</li>
</ul>
</li>
</ul>
<script type="text/javascript">
function demo(){
var ul_n=document.getElementById("d1");
var ul_chs=ul_n.childNodes;
for(var i=0;i<ul_chs.length;i++)
{
if(ul_chs[i].tagName=="LI")
{
ul_chs[i].onclick=change;
}
}
}
function change(){
li_chs=this.childNodes;
for(var i=0;i<li_chs.length;i++){
if(li_chs[i].tagName=="UL")
{
if(li_chs[i].className=="view")
{
li_chs[i].className="noview"
}
else{
li_chs[i].className="view"
}
}
}
}
</script>
</body>
</html>
分享到：
相关推荐
在这个“JavaScript案例-js伸缩二级菜单”的主题中，我们将深入探讨如何使用JavaScript来创建一个响应式的二级菜单，这在网页设计中非常常见，能够提升用户体验。 首先，我们需要理解HTML结构。二级菜单通常由一个...
本文将深入探讨“简单的三级级联伸缩菜单”这一主题，它是一种常见的网页设计元素，用于组织复杂的信息结构。 三级级联菜单通常指的是在主菜单项下有子菜单，子菜单下还有孙菜单的多级下拉结构。这种设计在大型网站...
在IT界，尤其是在网页设计和前端开发中，创建可折叠的自动伸缩菜单是一项常见的任务。这样的菜单可以极大地提升用户体验，特别是在移动设备上，因为它们有效地利用了有限的屏幕空间。接下来，我们将深入探讨这个主题...
1. **事件监听**：JavaScript通过添加事件监听器来捕捉用户的鼠标移动事件。常见的有`mouseover`和`mouseout`，分别在鼠标进入和离开元素时触发。 2. **DOM操作**：JavaScript可以操作Document Object Model（DOM）...
标题中的“jQuery+CSS3弹性工具栏伸缩菜单代码”是指一种使用JavaScript库jQuery和CSS3技术实现的网页导航菜单。这种菜单具有弹性，可以根据浏览器窗口的大小进行伸缩，提供良好的响应式用户体验，尤其适合在移动...
**jQuery+CSS 可折叠的多级自动伸缩菜单** 在网页设计中，导航菜单是不可或缺的一部分，它帮助用户在网站中快速定位和浏览内容。一个优秀的导航菜单应该具有清晰的层级结构、易于操作和良好的用户体验。jQuery 和 ...
- 为了适应不同设备的屏幕尺寸，菜单栏可能需要在移动设备上采用不同的展示方式，如汉堡菜单。 - 使用媒体查询（Media Queries）和jQuery的`.resize()`事件可以实现响应式布局。 7. **性能优化**： - 使用`.on()...
5. **响应式设计**：考虑到不同设备的屏幕尺寸，确保菜单在移动设备上也能正常工作至关重要。可能需要调整CSS和jQuery代码，以便在小屏幕上展开子菜单时不会覆盖其他内容。 6. **可维护性和扩展性**：最后，确保...
3. **可伸缩菜单**：可伸缩菜单允许用户根据需要展开或收起子菜单，节省空间，特别是在移动设备上。通过jQuery，我们可以监听用户的点击事件，动态改变菜单项的样式和结构，实现菜单的展开和收缩。 4. **CSS3过渡和...
【Js竖直伸缩菜单】是一种常见的网页交互设计，它允许用户通过点击或者鼠标悬停在菜单项上，实现子菜单的展开与收起，从而提高网页导航的用户体验。这种菜单设计尤其适用于内容层次较多、分类复杂的网站，因为它能够...
### 动态展开关闭的伸缩菜单Tree特效 在网页设计与开发中，导航菜单是不可或缺的一部分，良好的导航设计能够极大地提升用户体验。本篇将基于提供的文件内容，深入解析一个简单的动态伸缩菜单(Tree)特效的实现方法。...
本打包文件提供了近50种不同的伸缩滑动折叠菜单的实现方式，这些菜单利用了JavaScript（js）、层叠样式表（CSS）以及HTML的div元素，旨在满足现代Web设计中的各种导航需求。下面我们将详细探讨这些技术及其在创建...
总之，通过结合CSS3的过渡和关键帧动画，以及JavaScript的事件处理，我们可以轻松实现左侧菜单的伸缩滑动特效，为网站增添动态美感并提升用户体验。这个压缩包文件"jiaoben19576"可能包含了实现这一特效的具体代码...
"js下拉菜单.rar"是一个JavaScript下拉菜单的压缩文件，下拉菜单是网页设计中常见的导航元素，它节省空间且易于操作，尤其适用于移动设备。 最后，"COOLjsOutlookBar"可能是一个模仿微软Outlook风格的侧边栏菜单，...
隐藏式浮动元素是指在不被鼠标悬停时会自动隐藏的元素，当鼠标移动到特定区域时，它会显示出来。这种设计通常用于节省屏幕空间，特别是对于窄屏设备或者需要大量导航选项的网站。 “左侧快捷导航树”是指一个位于...
在文件"纯js操作div移动、伸缩，支持快捷键.html"中，我们可以预见到它可能包含了一个示例，演示了如何使用JavaScript来操纵Div的移动和伸缩，并且响应键盘快捷键。这可能涉及到DOM（Document Object Model）操作，...
【jQuery左右伸缩导航】是一种常见的网页交互设计，利用JavaScript库jQuery实现的动态导航菜单，其特点是通过左右滑动效果来展示或隐藏子菜单，既增强了用户体验，也节省了页面空间。这种导航栏在现代网页设计中十分...
纯CSS3意味着这些动画菜单的实现不依赖于JavaScript或者其他后端语言，完全通过CSS3的特性完成。这使得代码更简洁，加载速度更快，并且对搜索引擎优化友好。 一、CSS3关键帧动画（@keyframes） 这两款菜单可能利用...
在网页设计中，CSS3...总结，使用CSS3实现左侧菜单的伸缩滑动特效主要涉及`transition`和`transform`属性，以及可能的JavaScript交互逻辑。通过熟练掌握这些技巧，你可以为网站增添更具吸引力和用户体验的交互效果。
本资源“css3实现的左侧菜单伸缩滑动特效源码.zip”提供了使用CSS3实现的一种常见且实用的交互设计——左侧菜单栏的伸缩滑动效果。这个效果在现代网页设计中非常常见，尤其是在响应式设计中，它能为用户提供流畅的...