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. 案例_(单线程)使用xpath爬取糗事百科

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

  2. ajax案例_校验用户名

    目录 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_Database_11g_标准版_企业版__下载地址_详细列表

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

  7. ArcGIS案例学习笔记3_1_地理配准案例_目视找点

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

  8. ArcGIS案例学习笔记3_1_地理配准案例_图面控制点

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

  9. vue.js循环for(列表渲染)详解

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

随机推荐

  1. SQL注入测试用例

    //看看是什么权限的and 1=(Select IS_MEMBER('db_owner'))And char(124)%2BCast(IS_MEMBER('db_owner') as varchar( ...

  2. 利用sublime的snippet功能快速创建代码段

    在前端开发中我们经常会输入相同的一些基本代码,例如常用的jquery引用,bootstrap框架,cssreset等等,如果每次使用时在复制粘贴感觉很麻烦,这里介绍一种更为简洁的方法 利用sublim ...

  3. Sqli-labs less 17

    Less-17 本关我们可以看到是一个修改密码的过程,利用的是update语句,与在用select时是一样的,我们仅需要将原先的闭合,构造自己的payload. 尝试报错 Username:admin ...

  4. POJ 2541 Binary Witch(逆序KMP,好题)

    逆序KMP,真的是强大! 参考链接,下面有题意解释:http://blog.sina.com.cn/s/blog_6ec5c2d00100tphp.htmlhttp://blog.csdn.net/s ...

  5. MJRefresh插件引起的错误

    添加的头部或者尾部刷新,离开这个界面的时候需要移除 - (void)dealloc {    [_tableView removeHeader];} 不同版本的处理的方式不同 报的错误: 类的一个实例 ...

  6. 深入浅出ES6(十五):子类 Subclassing

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 在之前的文章<深入浅出ES6(十三):类 Class>中,我们一起深 ...

  7. **RESTful API版本控制策略

    做RESTful开放平台,一方面其API变动越少, 对API调用者越有利:另一方面,没有人可以预测未来,系统在发展的过程中,不可避免的需要添加新的资源,或者修改现有资源.因此,改动升级必不可少,但是, ...

  8. 浅析dex文件加载机制

    我们可以利用DexClassLoader来实现动态加载dex文件,而很多资料也只是对于DexClassLoader的使用进行了介绍,没有深入讲解dex的动态加载机制,我们就借助于Android4.4的 ...

  9. SQLHelper.cs的经典代码-存储过程

    using System; using System.Collections.Generic; using System.Text; using System.Collections; using S ...

  10. 利用反射完成初级万能DAO

    一.目标 利用反射完成初级万能DAO 二.注意 1.Field[] fi = clazz.getDeclaredFields(); for(Field ff : fi){ ff.setAccessib ...