js实现鼠标的滑动

最新推荐文章于 2023-07-06 11:32:44 发布
最新推荐文章于 2023-07-06 11:32:44 发布
阅读量205 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/c-961900940/p/4301119.html
版权

js实现鼠标的滑动

<!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/html; charset=gb2312" />
 <title>滑动TAB</title>
 <script language="javascript">
 function tabChange(obj,id)
 {
 var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
 var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
 for(i=0;i<arrayul.length;i++)
 {
 if(obj==arrayli[i])
 {
 arrayli[i].className = "cli";
 arrayul[i].className = "";
 }
 else
 {
 arrayli[i].className = "";
 arrayul[i].className = "hidden";
 }
 }
 }
 </script>
 <style type="text/css">
 .tabbox {width:300px;height:250px;}
 .tabmenu {width:295px;height:28px;border-left:1px solid #CCC;border-top:1px solid #ccc;}
 .tabmenu ul {margin:0;padding:0;list-style-type: none;}
 .tabmenu li { text-align:center; float:left; display:block; width:58px; height:27px; overflow:hidden; background-color: #D2E8F7; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;}
 .tabmenu .cli {text-align:center;float:left;display:block;width:58px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;}
 #tabcontent {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}
 #tabcontent ul {margin:0;padding:5px;list-style-type: none;}
 #tabcontent .hidden {display:none;}
 </style>
 </head>
 <body>
 <div class="tabbox">
 <div class="tabmenu">
 <ul>
 <li οnmοuseοver="tabChange(this,'tabcontent')" class="cli">水平网</li>
 <li οnmοuseοver="tabChange(this,'tabcontent')">酷站欣赏</li>
 <li οnmοuseοver="tabChange(this,'tabcontent')">源码下载</li>
 <li οnmοuseοver="tabChange(this,'tabcontent')">网页特效</li>
 <li οnmοuseοver="tabChange(this,'tabcontent')">电子书籍</li>
 </ul>
 </div>
 <div id="tabcontent">
 <ul name="tabul">
 <li><a href="#">www.goalercn.com</a></li>
 <li><a href="#">www.goalercn.com</a></li>
 <li><a href="#">www.goalercn.com</a></li>
 <li><a href="#">www.goalercn.com</a></li>
 <li><a href="#">www.goalercn.com</a></li>
 <li><a href="#">www.goalercn.com</a></li>
 </ul>
 <ul class="hidden">
 <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
 <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
 <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
 <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
 <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
 <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
 </ul>
 <ul class="hidden">
 <li><a href="#">水平网www.goalercn.com</a></li>
 <li><a href="#">水平网www.goalercn.com</a></li>
 <li><a href="#">水平网www.goalercn.com</a></li>
 <li><a href="#">水平网www.goalercn.com</a></li>
 <li><a href="#">水平网www.goalercn.com</a></li>
 <li><a href="#">水平网www.goalercn.com</a></li>
 </ul>
 <ul class="hidden">
 <li><a href="#">水平网</a></li>
 <li><a href="#">水平网</a></li>
 <li><a href="#">水平网</a></li>
 <li><a href="#">水平网</a></li>
 <li><a href="#">水平网</a></li>
 <li><a href="#">水平网</a></li>
 </ul>
 <ul class="hidden">
 <li><a href="http://www.goalercn.com">水平网欢迎您，www.goalercn.com</a></li>
 <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
 <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
 <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
 <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
 <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
 </ul>
 </div>
 </div>
 </body>
 </html>

 

转载于:https://www.cnblogs.com/c-961900940/p/4301119.html

weixin_30273175
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现鼠标拖动
qq_52006379的博客
08-25 1012
JS实现鼠标拖动。
js实现鼠标滑动到某个div禁止滚动
01-21
本文实例为大家分享了js实现鼠标滑动到某个div禁止滚动的具体代码，供大家参考，具体内容如下 项目中碰到一个场景就是当鼠标滑倒某个div的时候，滑动鼠标页面不再滚动。 这里主要是当鼠标滑动到该div时，监听滚轮...
【js---鼠标点击可拖动左右内容的实现】
小蓝人的博客
05-21 890
只需要改变对IT变量的限制即可。
js鼠标事件
qq_47243637的博客
01-09 1571
js鼠标事件
【VUE】JS监听鼠标上下滚动事件
最新发布
sunshineTing2的博客
07-06 3255
【代码】【VUE】JS监听鼠标上下滚动事件。
JavaScript鼠标移动事件及案例
热门推荐
weixin_67224308的博客
10-17 1万+
于onmouseover相同但mouseenter事件只执行一次。鼠标移动都某个指点的HTML标签上时触发的事件。鼠标从HTML标签上移开时触发的事件。alert("按钮被点击")//被点击两次后弹出弹出框。alert("按钮被点击")//被点击后弹出弹出框。//找到按钮并设置双击击事件。//找到按钮并设置点击事件。鼠标双击时事件处理函数。
JS DOM实现鼠标滑动图片效果
10-22
主要为大家详细介绍了JS DOM实现鼠标滑动图片效果，只要将鼠标放上该商品的区域，原本折叠起来的商品便会自动展开，感兴趣的小伙伴们可以参考一下
【JavaScript源代码】原生JS实现鼠标滑动撒爱心特效.docx
12-30
原生JS实现鼠标滑动撒爱心特效 　本文实例为大家分享了一个鼠标滑动撒爱心的js特效，效果如下：　以下是代码实现，欢迎大家复制粘贴和收藏。　<!DOCTYPE html>　　<html lang="en">　　 <head>　...
JS实现超简单的鼠标拖动效果
10-23
主要介绍了JS实现超简单的鼠标拖动效果,涉及JavaScript响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js模拟鼠标自动滑动滑块--dispatchEvent
nizaili1的博客
04-13 5119
initMouseEvent参数 event.initMouseEvent(type, canBubble, cancelable, view, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget); 形参 type 设置事件类型type 的字符串，包含以下几种鼠标事件：click，mousedown，mouseup，mouseover，mousemove
js实现鼠标拖拽div左右滑动
10-15
主要介绍了js实现鼠标拖拽div左右滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
触摸屏模拟鼠标功能11
10-27
Tabletpro 虚拟鼠标触控板 可以实现触摸屏多点触控事件，里面还有各种参数可以设置满足自己的开放需求。
pc端原生JS实现鼠标点击屏幕左右滑动
m0_52611940的博客
06-05 420
pc端原生JS实现鼠标点击屏幕左右滑动
JS 原生 仿WPS 实现某一快区域 滚动效果 （鼠标点击整体滚动/ 鼠标滑动整体移动）
weixin_55042716的博客
09-27 727
1.模仿WPS 顶部需求。鼠标点击左侧或者右侧按钮，整体区域移动。 2. 鼠标按下，整体区域向左移动
JS实现滚动条
qq_38427709的博客
11-20 5382
JS实现滚动条 在页面中，滚动条的样式虽然可以修改，但是部分属性是无法自己修改和设置，因此通过JS来实现滚动条在自定义滚动条的环境下也是有必要的。 在实现滚动条的过程中，首先需要分析组成部分，主要是内容和滚动两个部分，一般的滚动条主要需要实现的主要是内容的Scroll。 下面贴出代码 <!DOCTYPE html> <html lang="en"> <head>...
用jQuery和js判断鼠标的滑动方向
m0_62956518的博客
04-22 3307
判断鼠标的滑动方向需要用到鼠标的两个事件 一个是鼠标的按下事件：mousedown 一个是鼠标的松开事件：mouseup 本文使用了jquery，不使用jquery可以使用原生js获取html的元素 1.设置一个div 2.获取鼠标按下位置的X轴 $(document).ready(function() { $("#demo").mousedown(function(e) { var a1 = e.screenX; ...
js实现鼠标拖动+滚动的小案例
Free_Ya的博客
03-13 1819
前言： 之前练习阴阳师网页时，有如下的效果要实现，答主在网上找了很多教程，最后参考了某一篇博客写出，时间已久，忘记该博客地址。如有侵权，定及时删除！ 正文: 对于以上的效果，我们可以先来分析下，涉及的事件有 鼠标按下（onmousedown），鼠标移动onmousemove)，鼠标释放(onmouseup)，鼠标滑动(onmousewheel) 那么我们可以想一想：当鼠标按下的时候，我们是不是可以触发开关，让内容睡着滑块移动，当鼠标释放的时候，关闭开关。则内容也暂停移动。 好了，下面我们来看下代码： HTM
js实现鼠标滚轮一下滑动一个页面
qq_58192506的博客
10-24 1万+
111
vue.js实现鼠标滑动显示二级菜单源码
05-13
以下是一个简单的示例，演示如何使用Vue.js实现鼠标滑动显示二级菜单： ```html <template> <div class="menu-container"> <ul class="menu"> <li v-for="(item, index) in menuItems" :key="index" @mouseenter="showSubMenu(index)" @mouseleave="hideSubMenu(index)"> {{item.title}} <ul class="sub-menu" v-if="item.showSubMenu"> <li v-for="(subItem, subIndex) in item.subMenuItems" :key="subIndex"> {{subItem.title}} </li> </ul> </li> </ul> </div> </template> <script> export default { data() { return { menuItems: [ { title: '菜单1', showSubMenu: false, subMenuItems: [ { title: '子菜单1' }, { title: '子菜单2' }, { title: '子菜单3' }, ], }, { title: '菜单2', showSubMenu: false, subMenuItems: [ { title: '子菜单1' }, { title: '子菜单2' }, { title: '子菜单3' }, ], }, { title: '菜单3', showSubMenu: false, subMenuItems: [ { title: '子菜单1' }, { title: '子菜单2' }, { title: '子菜单3' }, ], }, ], }; }, methods: { showSubMenu(index) { // 显示子菜单 this.menuItems[index].showSubMenu = true; }, hideSubMenu(index) { // 隐藏子菜单 this.menuItems[index].showSubMenu = false; }, }, }; </script> <style scoped> .menu-container { width: 200px; } .menu { list-style-type: none; padding: 0; } .menu li { margin: 5px; cursor: pointer; } .sub-menu { list-style-type: none; margin: 0; padding: 0; display: none; } .sub-menu li { margin: 5px; } </style> ``` 在这个示例中，我们通过v-for指令循环遍历菜单项，并使用@mouseenter和@mouseleave事件监听器来显示和隐藏子菜单。我们还使用了v-if指令来根据showSubMenu属性判断是否显示子菜单。最后，我们在样式中设置了菜单和子菜单的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值