JS案例经验二
一
关键词:鼠标事件的触发
可以在函数中指定让鼠标事件自动触发,而不是必须要鼠标滑过才触发,例如:
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案例经验二的更多相关文章
- JS案例经验1
一 可以通过设置在一个div中的多个div的定位属性为absolute,从而使得这几个元素重叠.他们都脱离了标准流. 二 对于absolute的left和right属性,当left和right同时出现 ...
- Hadoop学习笔记—20.网站日志分析项目案例(二)数据清洗
网站日志分析项目案例(一)项目介绍:http://www.cnblogs.com/edisonchou/p/4449082.html 网站日志分析项目案例(二)数据清洗:当前页面 网站日志分析项目案例 ...
- sql执行计划解析案例(二)
sql执行计划解析案例(二) 今天是2013-10-09,本来以前自己在专注oracle sga中buffer cache 以及shared pool知识点的研究.但是在研究cache buffe ...
- WPF案例(二)模拟Apple OS 界面前后180度反转
原文:WPF案例(二)模拟Apple OS 界面前后180度反转 我们在设计应用程序界面的时候,为了充分利用界面空间,住住需要灵活的界面布局方式,比如可以在界面正面空间上定义一个Chart,背面空间上 ...
- 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨
原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...
- qrcode.js 动态生成二维码
用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...
- node.js 初学(二)—— 搭建注册/登录服务器
node.js 初学(二)—— 搭建注册/登录服务器 理论上来说,代码实现在理论和实际上是一样的.但实际上来说,他们不是 做一个最简单的用户注册登录功能 1.接口定义: 注册:/user?act=re ...
- js生成简单二维码
js文件下载地址:https://download.csdn.net/download/weixin_38296752/10554485 一.引入qrcode.js文件 <script type ...
- 进击Node.js基础(二)
一.一个牛逼闪闪的知识点Promise npm install bluebird 二.Promise实例 ball.html <!doctype> <!DOCTYPE html> ...
随机推荐
- java初学者的Springmvc04笔记
Springmvc04 Springmvc的全局异常处理 springmvc与spring的整合 myBatis 1.Springmvc的全局异常处理 作用:一次配置,对于controller层的所有 ...
- Mapnik使用postgres中的栅格数据
XML: <?xml version="1.0" encoding="utf-8"?> <Map background-color=" ...
- mysql 特殊符号
1.完全等于 <=> mysql> select null <=> null; +---------------+ | null <=> null | +-- ...
- Eclipse怎样对项目进行重命名?
当创建一个项目时,可能会随便命名一个项目名,如果想要项目名更有意义,或者为了方便后续项目的命名,怎么重命名项目名呢? 第一步在我们的电脑打开eclipse软件,找到需要重命名的项目,如下图所示: 第二 ...
- 简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序
首先,vue生命周期可以用下图来简单理解 当然这也是官方文档的图片,详细的vue周期详解请参考这里 然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCr ...
- Spring各种类型数据的注入
直接上代码: 一个MessageBean类 package com.henu.spring; import java.util.*; public class MessageBean { privat ...
- LINK : fatal error LNK1104: 无法打开文件“qtmaind.lib”
LINK : fatal error LNK1104: 无法打开文件"qtmaind.lib" VS2019+QT5.13出现该问题,可以尝试这样解决. 1.找打qtmaind.l ...
- 七、chromedriver各版本下载网址
http://chromedriver.storage.googleapis.com/index.html
- 【1】mongoDB 的安装及启动
MongoDB是一个面向文档(document-oriented)的数据库,不是关系型数据库.与关系型数据库相比,面向文档的数据库没有"行"的概念,取而代之的是"文档&q ...
- C# 自定义集合类
.NET中提供了一种称为集合的类型,类似于数组,将一组类型化对象组合在一起,可通过遍历获取其中的每一个元素 本篇记录一个自定义集合的小实例.自定义集合需要通过实现System.Collections命 ...