js案例_下滑列表
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';
最新文章
- word20161208
- .Net Core 自定义序列化格式
- MyIsam和InnoDB的区别
- Codeforces Round #197 (Div. 2)
- 马的遍历问题-回溯法应用-ACM
- WCF技术剖析之二十六:如何导出WCF服务的元数据(Metadata)[扩展篇]
- A亚马逊WS网上系列讲座——怎么样AWS云平台上千万用户的应用建设
- 使用DevExpress.XtraTabbedMdi.XtraTabbedMdiManager控件来加载MDI窗体
- Linux权限总结
- es6 语法 (symbol)
- face detection[PyramidBox]
- yolo
- IDEA—— 找不到或无法加载主类Main
- Python常用模块time &; datetime &;random 模块
- 用SQL命令手工创建CDB
- 针对unicode对象---检测字符串是否只由数字组成
- java中length与length()
- (转帖)CentOS最常用命令及快捷键整理
- Adaboost新理解
- jquery UI 的 datapicker 中文汉化问题
热门文章
- RCC 2014 Warmup (Div. 2)
- 表单很多数据项录入的时候,提交controller发生异常,数据回显。
- 使用Zend OpCache 提高 PHP 5.5+ 性能
- POJ 1006 Biorhythms (中国剩余定理)
- iOS第三方(ActionSheet)-JTSActionSheet
- OnClientClick=";return confirm(&#39;确定要删除吗?&#39;)";
- scp在Linux主机之间复制不用输入密码
- 弹性ScrollView,和下啦刷新的效果类似 实现下拉弹回和上拉弹回
- 窗口截图(可指定HWND窗口句柄)(三篇文章)
- 【重走Android之路】【Java面向对象基础(一)】数据类型与运算符