js案例_下滑列表

时间：2022-09-06 19:48:08

1、HTML布局（使用ul）：

<body>

    <ul>

        <li class="list" id="lis">

            <a href="#" id="link">微博</a>

            <ul id="ul1">

                <li><a href="#">评论</a></li>

                <li><a href="#">私信</a></li>

                <li><a href="#">@我</a></li>

            </ul>

       </li>

    </ul>

</body>

要实现下滑列表，当鼠标移动到下滑列表时，列表还能显示，就必须将列表包含在绑定事件里面

2、CSS样式

　　1、ul有默认的内外边距要去除

　　2、li有默认的列表样式要去掉

　　3、a不是区块元素，需要变成区块元素

    ul{ padding:; margin:;}

    li{ list-style:none;}

    .list{ width:120px; height:30px; border:1px solid red;}

    .list a{ line-height:30px; text-align:center; display:block; text-decoration:none; color:#000; background:#f1f1f1;}

    ul ul{ width:120px; border:1px solid #333; background:#FFC; display:none;}

    ul ul li{ text-align:center; line-height:30px;}

    ul ul li a{ text-decoration:none; color:blue;}

    ul ul li a:hover{ color:#0C0; background:#90C;}

注解：

　　1、希望把某个元素移除你的视线：

　　　　　　1、display:none; 显示为无

　　　　　　2、visibility:hidden; 隐藏
　　　　　　3、width \ height 将宽高设置为0
　　　　　　4、透明度() 将透明度设置为百分百
　　　　　　5、left \ top
　　　　　　6、拿一个白色DIV盖住它
　　　　　　7、margin负值

　　　　　　------------

3、js实现下滑列表原理

<script type="text/javascript">

    window.onload = function(){

        var lin = document.getElementById("link");

        var li = document.getElementById('lis');

        var ul = document.getElementById('ul1');

        li.onmouseover = show;

        li.onmouseout = hide;

        function show(){

            ul.style.display = "block";

            lin.style.background = 'yellow';

        }

        function hide(){

            ul.style.display = "none";

            lin.style.background = '#f1f1f1';

        }

    }

</script>

　　　注解：

　　　　　　1、JS中如何通过id获取元素：

　　　　　　　　document get element by id 'link'

　　　　　　　　docuemnt.getElementById('link');

　　　　　　2、事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件……

　　　　　　　　onclick

　　　　　　　　onmouseover
　　　　　　　　onmouseout
　　　　　　　　onmousedown
　　　　　　　　onmouseup
　　　　　　　　onmousemove 就像是鼠标抚摸一样的事件
　　　　　　　　……

　　　　　　　　onload 加载完以后执行……
　　　　　　　　window.onload = 事情
　　　　　　　　img.onload
　　　　　　　　body.onload
　　　　　　　　……

　　　　　　3、如何添加事件：
　　　　　　　　元素.onmouseover

　　　　　　

　　　　　　4、函数：可以理解为-命令，做一些事~~
　　　　　　　　function abc(){ // 肯定不会主动执行的！
　　　　　　　　　　……
　　　　　　　　}
　　　　　　　　1、直接调用：abc();
　　　　　　　　2、事件调用：元素.事件 = 函数名 oDiv.onclick = abc;

　　　　　　　　function (){} 匿名函数
　　　　　　　　　　元素.事件 = function (){};

　　　　　　5、测试：
　　　　　　　　alert(1); 带一个确定按钮的警告框
　　　　　　　　alert('ok'); 'ok' 字符串
　　　　　　　　alert("ok");

　　　　　　6、变量：
　　　　　　　　var li = document.getElementById('lis');
　　　　　　　　var num = 123;
　　　　　　　　var name = 'leo';

js案例_下滑列表的更多相关文章

  1. 案例&lowbar;&lpar;单线程&rpar;使用xpath爬取糗事百科

    案例_(单线程)使用xpath爬取糗事百科 步骤如下: 首先通过xpath插件找出我们要爬取的信息的匹配规则 url = "https://www.qiushibaike.com/8hr/p ...

  2. ajax案例&lowbar;校验用户名

    目录 ajax案例_校验用户名 代码下载 需求 流程 搭建环境 开发代码 1_jsp 1_servlet 1_service.dao 2_servlet 2_jsp 测试后,功能实现,完结撒花 aja ...

  3. 【JavaWeb】MVC案例之新闻列表

    MVC案例之新闻列表 作者:白宁超 2016年6月6日15:26:30 摘要:本文主要针对javaweb基本开发之MVC案例的简单操作,里面涉及mysql数据库及表的创建,以及jsp页面和servle ...

  4. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  5. js实现的新闻列表垂直滚动实现详解

    js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...

  6. Oracle&lowbar;Database&lowbar;11g&lowbar;标准版&lowbar;企业版&lowbar;&lowbar;下载地址&lowbar;详细列表

    Oracle_Database_11g_标准版_企业版__下载地址_详细列表 Oracle Database 11g Release 2 Standard Edition and Enterprise ...

  7. ArcGIS案例学习笔记3&lowbar;1&lowbar;地理配准案例&lowbar;目视找点

    ArcGIS案例学习笔记3_1_地理配准案例_目视找点 计划时间:第3天上午 方法:地理配准/添加链接点/左键/右键/输入坐标 数据:江苏省.zip 矢量:省界,市界,GPS WGS84 地理坐标系 ...

  8. ArcGIS案例学习笔记3&lowbar;1&lowbar;地理配准案例&lowbar;图面控制点

    ArcGIS案例学习笔记3_1_地理配准案例_图面控制点 计划时间:第3天上午 目的:地形图控制点配准 数据:地形图drg 无坐标: 步骤 1.查看地图标注 2. 地理配准,添加控制点 3.结果: 联 ...

  9. vue&period;js循环for（列表渲染）详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

随机推荐

  1. objective-c IOS应用更新

    当前苹果已经禁止了,通过IOS应用直接跳转APP下载链接的方法.但是仍然可以使用另外一种方法直接跳转AppStore. 这种方法需要增加一个类库StoreKit.framework. 这里使用这功能是 ...

  2. php面向对象：封装

    OOP三大特性:封装.继承.多态. 封装的目的:为了让类更安全封装的做法:1.类里面的成员变量做为private2.使用成员方法来间接访问成员变量3.在该方法里面加限制条件 注意:php类里面不允许出 ...

  3. 读javascript高级程序设计01-基本概念、数据类型、函数

    一. javascript构成 1.javascript实现由三部分组成: ECMAScript:核心语言功能 DOM:文档对象模型,提供访问和操作网页内容的方法和接口 BOM:浏览器对象模型,提供与 ...

  4. JQ关于浏览器宽高的获取方式

    JQ关于浏览器宽高的获取方式 alert($(window).height()); //浏览器时下窗口可视区域高度alert($(document).height()); //浏览器时下窗口文档的高度 ...

  5. String 去重，区分大小写

    题目要求:去除,和.,相同的单词去除后面的.区分大小写 示例:输入:There is a will,there is a way. 输出There is a will there way 答案代码: ...

  6. bzoj1001

    平面图求最小割: 其实看bzoj1001一开始着实把我怔住了 AC的人暴多,可自己完全没思路 后来看了某大牛的ppt,才会做 一个月前做这题的吧,今天来简单回忆一下: 首先是欧拉公式 如果一个连通的平 ...

  7. strip&comma; 关于去除目标文件种的不必要信息

    对于so动态库及可执行文件,可以直接调用不带参数的strip (-s, 即--strip-all)去除大多数不必要的信息.因为so库非常标准,所以strip之后仍然可以进行完美的动态连接:而可执行文件 ...

  8. 最短路径floy算法———模板

    #include<cstdio>int n,i[1000][1000];int main(){ scanf("%d",&n); for (int a=1;a&l ...

  9. ECharts 高度宽度自适应（转载）

    最近在写一个地图类的应用,用的是echarts的图表,然而一上来就一脸懵逼,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表.所 ...

  10. 网站加速与Linux服务器防护

    网站加速方面 1. Nginx 配置 gzip 压缩 开启nginx gzip压缩后,网页.css.js等静态资源的大小会大大的减少,从而可以节约大量的带宽,提高传输效率,给用户快的体验.虽然会消耗c ...

相关文章