js实现水平伸缩菜单
window.onload=function(){
var aA=document.getElementsByTagName('a');
for(var i=0; i<aA.length; i++){
aA[i].onmouseover=function(){
var This=this;
clearInterval(This.time);
This.time=setInterval(function(){
This.style.width=This.offsetWidth+8+"px";
if(This.offsetWidth>=160)
clearInterval(This.time);
},30)
}
aA[i].onmouseout=function(){
clearInterval(this.time);
var This=this;
this.time=setInterval(function(){
This.style.width=This.offsetWidth-8+"px";
if(This.offsetWidth<=120){
This.style.width='120px';
clearInterval(This.time);
}
},30)
}
}
}
js实现水平伸缩菜单的更多相关文章
- css实现水平伸缩菜单
ul li a{transition:width 500ms ease;} a:hover{width:*;} 高度向上延伸用height:*;margin-top:-*px;//负值实现向上
- JQ写简单的伸缩菜单(内附效果图和源代码)
效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中(转)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用js枚举实现简易菜单效果
用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...
- Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
- 下拉的DIV+CSS+JS二级树型菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 重写JS的鼠标右键点击菜单
重写JS的鼠标右键点击菜单 该效果主要有三点,一是对重写的下拉菜单的隐藏和显示:二是屏蔽默认的鼠标右键事件:三是鼠标左键点击页面下拉菜单隐藏. 不多说,上html代码: 1 <ul id=&qu ...
- 原生JS封装创建多级菜单函数
手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...
- 纯css和js版下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- hadoop中的一次集群任务执行超时问题查找过程
问题背景 本次进行一个项目的重构,在某些活动数据量比较大的情况下,会偶尔出现1200s超时的情况,如下: AttemptID:attempt_1410771599055_11709_m_000033_ ...
- py4常用模块
导入模块方式 import 单文件 from dir import file 目录下文件 如果有相同的名称,可以采用别名的方式 from dir import file as rename.file ...
- Java垃圾回收机制和内存分配
收集算法是内存回收的方法论,垃圾收集器是内存回收的具体实现 自动内存管理解决的是:给对象分配内存 以及 回收分配给对象的内存 为什么我们要了解学习 GC 与内存分配呢? 在 JVM 自动内存管理机制的 ...
- CentOS7 安装Chrome
1. 下载Chrome浏览器的rpm包 https://www.chrome64bit.com/index.php/google-chrome-64-bit-for-linux 2. 安装Chrome ...
- histroy.back和histroy.go的区别
histroy.back(-1):直接返回当前页的上一页,数据全部消失,是个新的页面: histroy.go(-1):直接返回当前页的上一页,不过表单里的数据全部还在: histroy.back(0) ...
- ceph---luminous 块存储(RBD)搭建
1. 创建pool 创建存储池: ceph osd pool create {pool-name} {pg-num} [{pgp-num}] [replicated] [crush-ruleset-n ...
- FastQC 测序质量
文章转载于 Original 2017-07-06 Jolvii 生信百科 介绍一下如何理解 FastQC 各模块的结果 FastQC 的使用 FastQC的安装介绍请看这里.FastQC 支持 fa ...
- 小酌Jmeter4.0新版本特性
1. 首先下载打开jmeter4.0,说一个能感受到的视觉变化,如图, 黑色界面,不少朋友认为做技术黑色的东西看起来高上大一点,虽然这个观念有点肤浅,但似乎也有点道理,毕竟还是有不少朋友热衷于lin ...
- winform频繁刷新导致界面闪烁解决方法
转自龙心文 原文 winform频繁刷新导致界面闪烁解决方法 一.通过对窗体和控件使用双缓冲来减少图形闪烁(当绘制图片时出现闪烁时,使用双缓冲) 对于大多数应用程序,.NET Framework 提供 ...
- C#对Excel的图文操作
1.打印Excel 目前的商业工具如水晶报表,ActiveReport等,都提供了灵活,强大的功能,但是对于比较特殊化的表格,特别是国内的一些应用,都是一个个的格子组成的,这样要是用线来一根根画就比较 ...