关键词:鼠标事件的触发

可以在函数中指定让鼠标事件自动触发,而不是必须要鼠标滑过才触发,例如:

main.onmouseover(); // 可以把该语句看做是鼠标滑过的模拟动作 main是DOM元素

关键词:for..of 的兼容性问题

旧的浏览器可能不会兼容for of方式的迭代方式,所以尽量使用常规的方式来迭代数组。

关键词:function作用域问题

例子:

for(var d = 0;d<10;d++){
function(){
console.log(d); //在此处,打印的d的值永远为10; `原因未知`
}
}

关键词:元素的className

清除元素className的方法:

main.className = "";  //main为获取的DOM元素

关键词:元素在元素之上

若想让元素a在元素b之上,就应该先让元素a和元素b处在同一级,然后让元素a脱离标准流。

line-height可以控制a元素的高度。

关键词:导航栏相邻元素display问题

在js导航栏的案例中,需要实现这样的功能:当从一级菜单滑出时,保证二级菜单不消失(前提:设置了滑出一级菜单时二级菜单消失)。

实现方法:为二级菜单的设置滑过她时,他自己出现。

总结

在这个案例中,整个轮播特效的部分在一个整体的div中。

图片轮播的区域又是一个div(banner),图片相对于这个大的div定位在它里面,并重叠。图片上的箭头和原点和banner处于同一级,这是为了让他们脱离原本的文本流,从而出现在banner之上,也就是说为了让他们高一层。因为图片设置了定位,所以箭头们必须设置定位。

主菜单栏区域

他和banner也是同一级,子菜单同样和她同一级。

div的嵌套可以实现非常多的页面

JS案例经验二的更多相关文章

  1. JS案例经验1

    一 可以通过设置在一个div中的多个div的定位属性为absolute,从而使得这几个元素重叠.他们都脱离了标准流. 二 对于absolute的left和right属性,当left和right同时出现 ...

  2. Hadoop学习笔记—20.网站日志分析项目案例(二)数据清洗

    网站日志分析项目案例(一)项目介绍:http://www.cnblogs.com/edisonchou/p/4449082.html 网站日志分析项目案例(二)数据清洗:当前页面 网站日志分析项目案例 ...

  3. sql执行计划解析案例(二)

    sql执行计划解析案例(二)   今天是2013-10-09,本来以前自己在专注oracle sga中buffer cache 以及shared pool知识点的研究.但是在研究cache buffe ...

  4. WPF案例(二)模拟Apple OS 界面前后180度反转

    原文:WPF案例(二)模拟Apple OS 界面前后180度反转 我们在设计应用程序界面的时候,为了充分利用界面空间,住住需要灵活的界面布局方式,比如可以在界面正面空间上定义一个Chart,背面空间上 ...

  5. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  6. qrcode.js 动态生成二维码

    用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...

  7. node.js 初学(二)—— 搭建注册/登录服务器

    node.js 初学(二)—— 搭建注册/登录服务器 理论上来说,代码实现在理论和实际上是一样的.但实际上来说,他们不是 做一个最简单的用户注册登录功能 1.接口定义: 注册:/user?act=re ...

  8. js生成简单二维码

    js文件下载地址:https://download.csdn.net/download/weixin_38296752/10554485 一.引入qrcode.js文件 <script type ...

  9. 进击Node.js基础(二)

    一.一个牛逼闪闪的知识点Promise npm install bluebird 二.Promise实例 ball.html <!doctype> <!DOCTYPE html> ...

随机推荐

  1. 【NOIP2016提高组day1】†换教室

    题目 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的 课程. 在可以选择的课程中,有 2n 节课程安排在 n 个时间段上. 在第 i ( 1 ≤ i ≤ n )个 时间段上,两 ...

  2. 运维工程师之IDC系列

    因为我公司在用浪潮服务器,所以说链接暂时是浪潮服务器 1.用UltraISO制作U盘启动安装系统  链接 http://www.4008600011.com/archives/8816 ones 刻录 ...

  3. BigDecimal除法问题

    BigDecimal类的主要功能是进行小数的大数计算,而且最重要的是可以精确到指定的四舍五入位数. 如果要进行四舍五入的操作,则必须依靠以下的方法:public BigDecimal divide(B ...

  4. 【canvas学习笔记七】混合和裁剪

    globalCompositeOperation 如果我们先画了一个图形,然后要在这个图形上面再画一个图形,那么这个图形会怎么样呢?是覆盖在原来的图形上面吗?这时候,就要用到globalComposi ...

  5. 3D Computer Grapihcs Using OpenGL - 19 Vertex Array Object(顶点数组对象)

    大部分OpenGL教程都会在一开始就讲解VAO,但是该教程的作者认为这是很不合理的,因为要理解它的作用需要建立在我们此前学过的知识基础上.因此直到教程已经进行了一大半,作者才引入VAO这个概念.在我看 ...

  6. pycharm selenium 安装firefox驱动和Google驱动教程

    一.下载Firefox浏览器或Google浏览器 下载渠道有很多,直接下载最新版的就可以了. 二.下载驱动 Firefox驱动 地址:https://github.com/mozilla/geckod ...

  7. pyCharm报错"your evaluation license has expired, pycharm will now exit"解决方法(实测)

    一.修改C:\Windows\System32\drivers\etc 目录下的hosts文件 1.打开hosts文件,路径是 c:\windows\system32\drivers\etc\host ...

  8. 测试常用linux命令之sed篇

    一.sed命令 可以放在单独的脚本文件中执行:sed -f script1 data1 多条命令也可以用{}括起来 sed可以进行文本的替换,删除,行添加,打印等.采用 sed [address]{c ...

  9. 每日踩坑 2019-07-30 H5 使用 iframe 底部有白边

    用个iframe累死累活的 用 js 动态计算高度, 结果明明px都对,然后却把页面滚动条也整出来了. 查看元素盒模型也一切正常. 然后仔细观察就发现是下边多了几个像素的白色边. 然后就 百度呗 以下 ...

  10. npm 错误记录

    npm run dev iview-weapp@1.1.0 dev /Users/Jovins/Desktop/小程序/iview-weapp gulp --gulpfile build/build- ...