【代码笔记】HTML+CSS+JAVAScript+jQuery滑过图标下滑列表
来源:互联网 发布:陕西大数据集团官网 编辑:程序博客网 时间:2024/05/21 10:55
原理:
使用jQuery的sildeDown以及sildeUp方法来实现。
具体思路:
通过设置ul的display属性来实现。
具体实现代码:
JS文件:
function list(log) {$(".header").hover(function() {<span style="white-space:pre"></span>$("#u_list").stop().slideDown(100);<span style="white-space:pre"></span>}, function(){<span style="white-space:pre"></span>$("#u_list").stop().slideUp(100);});}
HTML/JSP文件:
<div class="header"><img src="images/toplogo.png" onclick="location.href='index.jsp'" /><ul id="u_list" style="display:none;"><li><a href="login.jsp">登录</a></li><li><a href="reg.jsp">注册</a></li></ul></div>
CSS文件:
.header { position: absolute; width: 120px; margin-left: 5px; height: 90px; cursor: pointer; box-sizing: border-box; text-align: center;}.header img { position: absolute; left: 50%; top: 5px; margin-left: -45px; max-height: 90px;}#u_list { position: absolute; top: 100px; width: 30px; z-index: 999; background-color: #ffffff; width: 120px; border-right: 2px solid #35a7a9; border-left: 2px solid #35a7a9; border-top: 2px solid #35a7a9;}#u_list li { text-align: center; list-style: none; height: 50px; border-bottom: 2px solid #35a7a9;}#u_list li:hover { text-align: center; list-style: none; height: 50px; border-bottom: 2px solid #35a7a9; background-color: #FEFFAA;}#u_list li a { display: block; width: 100%; height: 100%; color: #3bc0c3; line-height: 50px; font-family: 微软雅黑; text-decoration: none;}效果图:
注意:
1.必须是div设置hover动作,即.header,不能.header img,否则鼠标移到下滑菜单超出img的范围会导致菜单隐藏。
2.stop()的作用是停止当前的动画。
3.需要onload该js脚本。
4.图片来自于琉璃神社logo,随便找了个图。。
0 0
- 【代码笔记】HTML+CSS+JAVAScript+jQuery滑过图标下滑列表
- 【代码笔记】HTML+CSS+JAVAScript+jQuery点击图标下滑列表
- html,css,javascript,jquery使用笔记
- HTML+CSS+JavaScript+JQuery+JSP学习笔记
- Notepad++ 配置 支持jquery、html、css、javascript、php代码提示
- javascript css html笔记
- html+css+javascript笔记
- Web前端开发【html+css+javascript+Dom+jQuery】问题笔记
- javascript/jquery/html/css工作总结
- HTML、css、JavaScript 代码分离
- html+css+javascript实现列表循环滚动
- HTML+CSS+JavaScript学习笔记
- HTML、CSS、JavaScript 学习笔记
- css-列表图标兼容性
- php javascript mysql html css jquery ajax
- HTML CSS JAVASCRIPT JSON DOM JQUERY PHP
- 前段HTML+CSS+Javascript+Jquery总结
- [李景山php] html css JavaScript jquery试题库
- 华为OJ 初级:24点游戏算法
- ACM做题过程中的一些小技巧
- mail_send.php
- SDUT 3361 数据结构实验之图论四:迷宫探索
- ROS学习(-)基本概念+发布&订阅消息
- 【代码笔记】HTML+CSS+JAVAScript+jQuery滑过图标下滑列表
- (HDU 5753)2016 Multi-University Training Contest 3 Permutation Bo (水)
- H5引导页制作流程分享及脱坑记录
- php发送email最终版 (案例)
- FragmentPagerAdapter 的那些坑
- hdoj2612Find a way(两次bfs)
- 论assert(0)的作用
- ACM中常见错误对应表
- Activity生命周期+四种模式——枯燥重要(五)