JavaScript实现滑动门效果

最新推荐文章于 2021-06-09 18:08:45 发布
最新推荐文章于 2021-06-09 18:08:45 发布
阅读量1k 收藏
点赞数
文章标签： javascript function xhtml div border html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zl943588435/article/details/7288624
版权
 

<!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=utf-8" />
<title>JS实现滑动门效果</title>
<style>

 div{
  display:none;
 }
 ul{
  list-style-type:none;
  margin-left:-30px;
  margin-top:0px;
  }
 li{
  background-color:#FFFF33;
  width:100px;
  display:block;
  padding:4px 0px 2px 0px;
  text-align:center; 
  } 
 li a{
  color:#666;
  text-decoration:none;
  padding:4px 0px 2px 0px;
  
 }
 li a:hover{
  color:#00F;
  background-color:#00CC99;
  display:block;
  border-style:solid;
  border-width:2px;
  border-color:red;
 }
  span a:hover{
  color:#FF33CC;}
 span a{
  text-decoration:none;}
</style>
<script language="javascript" type="text/javascript">
//滑动的下拉菜单

function Show(dnum){
 document.getElementById(dnum).style.display="block";
}
function Hidden1(dnum){
 document.getElementById(dnum).style.display="none";
}
</script>
</head>

<body>
<table border="0">
  <tr>
    <td width="110" align="center" bgcolor="#999999" οnmοuseοver="Show(1)" οnmοuseοut="Hidden1(1)"><span><a href="#">武侠</a></span></td>
    <td width="110" align="center" bgcolor="#999999" οnmοuseοver="Show(2)" οnmοuseοut="Hidden1(2)"><span><a href="#">武侠</a></span></td>
    <td width="110" align="center" bgcolor="#999999" οnmοuseοver="Show(3)" οnmοuseοut="Hidden1(3)"><span><a href="#">武侠</a></span></td>
    <td width="110" align="center" bgcolor="#999999" οnmοuseοver="Show(4)" οnmοuseοut="Hidden1(4)"><span><a href="#">武侠</a></span></td>
  </tr>
  <tr>
    <td οnmοuseοver="Show(1)" οnmοuseοut="Hidden1(1)">
  <div id="1">
   <ul>
    <li><a href="#">金庸系列</a></li>
    <li><a href="#">金庸系列</a></li>
    <li><a href="#">金庸系列</a></li>
    <li><a href="#">金庸系列</a></li>
   </ul>
  </div>
 </td>
    <td οnmοuseοver="Show(2)" οnmοuseοut="Hidden1(2)">
  <div id="2">
   <ul>
    <li><a href="#">金庸系列</a></li>
    <li><a href="#">金庸系列</a></li>
    <li><a href="#">金庸系列</a></li>
    <li><a href="#">金庸系列</a></li>
   </ul>
  </div> 
 </td>
    <td οnmοuseοver="Show(3)" οnmοuseοut="Hidden1(3)">
  <div id="3">
   <ul>
    <li><a href="#">金庸系列</a></li>
    <li><a href="#">金庸系列</a></li>
    <li><a href="#">金庸系列</a></li>
    <li><a href="#">金庸系列</a></li>
   </ul>
  </div> 
 </td>
    <td οnmοuseοver="Show(4)" οnmοuseοut="Hidden1(4)">
  <div id="4">
   <ul>
    <li><a href="#">金庸系列</a></li>
    <li><a href="#">金庸系列</a></li>
    <li><a href="#">金庸系列</a></li>
    <li><a href="#">金庸系列</a></li>
   </ul>
  </div> 
 </td>
  </tr>
</table>

</body>
</html>

csdn-php-张黎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML调用JS实现多项滑动门选项卡特效
04-28
HTML调用JS实现多项滑动门选项卡特效 国开电大Dreamweaver网页设计形考任务八答案, 更新版国家开放大学/电大专科《Dreamweaver网页设计》形考任务八。
【原生JS】滑动门效果
dizhengshao3220的博客
04-13 117
效果图： 思路：通过每次鼠标移动至目标上使所有图片重置为初始样式再向左移动目标及其左侧每个图片隐藏部分距离即实现。 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>&l...
用js实现图片滑动门效果
11-15 267
利用jsdom和css实现图片滑动门效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sliding doors<...
形考任务八 HTML 调用js实现多项滑动门选项卡特效.zip
11-24
形考任务八 HTML 调用js实现多项滑动门选项卡特效。
html鼠标经过滑动展开菜单,JS+CSS实现简单滑动门(滑动菜单)效果
weixin_29227425的博客
05-31 593
本文实例讲述了JS+CSS实现简单滑动门的方法。分享给大家供大家参考。具体如下：这是一款超简约设计的滑动门菜单，鼠标放到主菜单上，里面的内容会跟着变化，实际上本演示是一个范例，从代码中的注释你就能感觉到，每一步都有注释，对学习JavaScript和CSS都有帮助，也为你以后写出比这更漂亮、更实用的滑动门做铺垫。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w...
基于JavaScript实现滑动门效果
10-20
通过JavaScript实现滑动门效果的关键在于动态调整元素的CSS属性，尤其是`left`属性，以改变元素的位置。在这个例子中，我们使用了`onmouseover`事件来触发滑动效果，并通过循环遍历和计算来实现多个图片元素的滑动。...
JS实现滑动门效果的方法详解
11-28
JavaScript（JS）实现滑动门效果是一种常见的网页交互设计，常用于图片展示或导航菜单，使得用户能够通过鼠标悬停来动态展现隐藏内容。本文将详细介绍如何使用JS来实现这一效果。 滑动门效果的基本思路如下： 1. *...
javascript 通用滑动门tab类
10-30
总的来说，这个`scrollDoor`类提供了一种优雅的方式，用于在JavaScript中实现滑动门效果，通过将代码封装成类，我们可以轻松地在不同页面或项目中复用这个功能，只需传入相应的菜单和内容元素即可。这提高了代码的可...
html滑动门+多个,jQuery实现的多滑动门，多选项卡效果代码
weixin_39830020的博客
06-09 229
本文实例讲述了jQuery实现的多滑动门，多选项卡效果。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：超多滑动门效果* {margin:0;padding:0;}body {font-size:12px;}ul, li {list-style-type:none;}#tab {width:500px;height:200px;margin:20px auto;overflow:h...
js实现简洁的滑动门菜单(选项卡)效果代码
10-23
主要介绍了js实现简洁的滑动门菜单(选项卡)效果代码,涉及javascript鼠标事件操作页面元素样式切换的实现技巧,简单实用,需要的朋友可以参考下
HTML+CSS实现的滑动门选项卡
11-06
jqury导航栏 jqury特效 HTML+CSS 滑动门 选项卡
JS+CSS实现简单滑动门(滑动菜单)效果
10-23
主要介绍了JS+CSS实现简单滑动门(滑动菜单)效果,通过JavaScript响应鼠标事件动态设置页面元素样式实现滑动菜单功能,需要的朋友可以参考下
Dreamweaver实现的一些特效
05-11
dreamweaver实现的各种按钮、菜单、table、表单、下拉框
使用JS实现选项卡和滑动门的效果
Anlilower的博客
09-19 3500
选项卡的实现，就是这样滴...
原生JavaScript实现滑动门效果
kiku
05-03 954
一、什么是滑动门 首先你要了解什么是滑动门。 生活中我们经常看到一些网站或是商城有一些滑动门的效果， 那么怎么实现一个简单的滑动门的网页特效呢？下面简单分享一下方法, 二、实现滑动门所需技术 简单的HTML基础知识 简单的CSS基础样式 基本的javascript知识 三、如何实现滑动门（重点） 准备好一段HTML代码 <div id="container"> &lt...
html横向选项卡 js,JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
weixin_39580042的博客
06-03 273
本文实例讲述了JS实现滑动菜单效果代码。分享给大家供大家参考。具体如下：这里实现一个特效将网页中的选项卡滑动门都集中到一个网页中来，有些同志曾经为同一个页面布置两个滑动门而烦恼，参考一下本例子，相信你会找到答案，而且有各种排列方式的选项卡，总有一款会满足你。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
html 滑动门效果,js实现简洁的滑动门菜单(选项卡)效果代码
weixin_39900437的博客
06-03 960
本文实例讲述了js实现简洁的滑动门菜单。分享给大家供大家参考。具体如下：一个简洁实用的网页选项卡菜单，在同一个页面中实现两个选项卡，第一个是滑动门，从布局上来说基本是相似的，第二个是选项卡，这里主要使用了Js自定义函数：tabMenu，函数功能：实现tab菜单，参数说明：tabMenu(tabBox,navClass);参数一：tabBox(tab容器id)参数二：navClass(当前标签样式c...
选项卡html js代码,JS实现选项卡效果的代码实例
weixin_30045135的博客
06-03 372
选项卡这个效果估计以后的项目会经常涉及到，对代码还是半熟练的情况下还是写下来吧。先来布局一个简单的页面：*{margin: 0;padding: 0;list-style: none;}#box{margin: 50px;}#box li{width: 100px;height: 40px;line-height: 40px;text-align: center;background-color:...
JS+CSS实现带箭头指示的滑动门效果教程
本篇文章详细介绍了如何通过JavaScript (JS) 和 Cascading Style Sheets (CSS) 的结合，实现一款具有小三角形指引功能的滑动门效果。该滑动门设计不仅实现了基础的页面导航，还增强了用户体验，通过动态样式调整，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值