html鼠标滚动效果代码,JS+CSS实现大气清新的滑动菜单效果代码

本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码。分享给大家供大家参考,具体如下:

这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜单,兼容性也不错,适合大多数网站使用,用到两张背景图片,请拷贝图片地址下载图片。

运行效果截图如下:

00ebcb7f6f6d672db8c5f135899b23c7.png

在线演示地址如下:

具体代码如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

滑动导航菜单

body {margin:25px; font:12px Verdana, Arial, Helvetica}

* {padding:0; margin:0}

.dropdown {float:left; padding-right:5px}

.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}

.dropdown dt:hover {background:url(images/header_over.gif)}

.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}

.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}

.dropdown li {display:inline}

.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}

.dropdown a:hover {background:#d9e1e4; color:#000}

.dropdown .underline {border-bottom:1px solid #b9d6dc}

var DDSPEED = 10;

var DDTIMER = 15;

function ddMenu(id,d){

var h = document.getElementById(id + '-ddheader');

var c = document.getElementById(id + '-ddcontent');

clearInterval(c.timer);

if(d == 1){

clearTimeout(h.timer);

if(c.maxh && c.maxh <= c.offsetHeight){return}

else if(!c.maxh){

c.style.display = 'block';

c.style.height = 'auto';

c.maxh = c.offsetHeight;

c.style.height = '0px';

}

c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);

}else{

h.timer = setTimeout(function(){ddCollapse(c)},50);

}

}

function ddCollapse(c){

c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);

}

function cancelHide(id){

var h = document.getElementById(id + '-ddheader');

var c = document.getElementById(id + '-ddcontent');

clearTimeout(h.timer);

clearInterval(c.timer);

if(c.offsetHeight < c.maxh){

c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);

}

}

function ddSlide(c,d){

var currh = c.offsetHeight;

var dist;

if(d == 1){

dist = (Math.round((c.maxh - currh) / DDSPEED));

}else{

dist = (Math.round(currh / DDSPEED));

}

if(dist <= 1 && d == 1){

dist = 1;

}

c.style.height = currh + (dist * d) + 'px';

c.style.opacity = currh / c.maxh;

c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';

if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){

clearInterval(c.timer);

}

}

希望本文所述对大家JavaScript程序设计有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/337695.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker和java容器_使用Docker容器和Java EE进行持续交付

docker和java容器组织需要一种使应用程序交付快速&#xff0c;可预测和安全的方法&#xff0c;而诸如docker之类的容器所提供的敏捷性则可以帮助开发人员实现这一目标。 对于Java EE应用程序&#xff0c;这可以在容器中打包应用程序&#xff0c;应用程序服务器和其他依赖项&…

alientek ministm32液晶显示程序_佳显12864中文字库液晶专业生产液晶显示模块

GDRAM&#xff1a;(Graphic Display RAM)&#xff1a;图形显示RAM&#xff0c;这一块区域用于绘图&#xff0c;往里面写啥&#xff0c;屏幕就会显示啥&#xff0c;它与DDRAM的区别在于&#xff0c;往DDRAM中写的数据是字符的编码&#xff0c;字符的显示先是在CGROM中找到字模&a…

C++ 面试考点(一)

点击蓝字关注我们C 基础1、引用和指针的区别&#xff1f;初始化:引用在定义的时候必须进行初始化&#xff0c;并且不能够改变指针在定义的时候不一定要初始化&#xff0c;并且指向的空间可变访问逻辑不同:通过指针访问对象, 用户需要使用间接访问通过引用访问对象, 用户只需使用…

dojo还有人用吗_我的Dojo中有一个Mojo(如何编写Maven插件)

dojo还有人用吗我一直忙于在工作中使用Maven的腋窝。 对于很多开发人员&#xff0c;我会听到&#xff1a;“那又怎样。” 区别在于&#xff0c;我通常在无法直接访问Internet的环境中工作。 因此&#xff0c;当我说我经常使用Maven时&#xff0c;这意味着某些事情。 依赖地狱 …

html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效

这是一组效果非常炫酷的纯CSS3 Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的&#xff0c;每一个加载动画都构思新颖&#xff0c;效果非常的酷。安装可以通过bower来按钮这个loading动画特效&#xff1a;b…

中点和中值滤波的区别_频谱仪和EMI测试接收机什么区别?安泰维修中心分享

测试人员在选择使用射频仪器的时候都在纠结选择频谱仪还是测试接收机又或者信号分析仪。下面由安泰频谱分析仪维修中心分享频谱仪和EMI测试接收机什么区别&#xff1f;测量接收机是什么&#xff1f;频谱仪和信号分析仪什么区别&#xff1f;信号源分析仪是什么&#xff1f;一、频…

C++ 面试必问:深入理解虚函数表

点击蓝字关注我们深入理解C 虚函数表C中的虚函数的作用主要是实现了多态的机制。关于多态&#xff0c;简而言之就是用父类型别的指针指向其子类的实例&#xff0c;然后通过父类的指针调用实际子类的成员函数。Derive d; Base1 *b1 &d; Base2 *b2 &d; Base3 *b3 &…

html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪

前言&#xff1a;我们在网页中经常会用到图片展示&#xff0c;通常情况下会给一个固定的宽高来显示这个图片&#xff0c;然而从服务器端上传的图片大小是不确定的&#xff0c;如果直接按默认填充这个框有时候就会特别丑orz。作为一个完(wai)美(mao)主(xie)义(hui)者&#xff0c…

switch日文键盘打中文_12月有哪些Switch游戏值得期待?

文章转自A9vg&#xff0c;作者setsuka_duki 经历了11月的游戏浪潮后&#xff0c;一年中最后一个月份也悄然而至&#xff0c;相比较“战火连天”的11月&#xff0c;在12月发售的重量级游戏并不算太多&#xff0c;这边为大家整理12月哪些值得一玩的Switch游戏。 《Tools Up!》(分…

基于 C++11 的线程池 threadpool , 简洁且可以带任意多的参数

点击蓝字关注我们咳咳。C11 加入了线程库&#xff0c;从此告别了标准库不支持并发的历史。然而 c 对于多线程的支持还是比较低级&#xff0c;稍微高级一点的用法都需要自己去实现&#xff0c;譬如线程池、信号量等。线程池(thread pool)这个东西&#xff0c;在面试上多次被问到…

c# 字典排序_Python零基础入门之列表与字典

本篇内容需结合源码&#xff0c;获取方法看末尾数据结构数据结构就是指从计算机存储、组织数据的结构列表(List) 元组(Tuple)字典(Dictionary)集合(Set)列表(List)列表中的数据按顺序排列列表有正序与倒序两种索引列表可存储任意类型数据&#xff0c;且允许重复创建列表变量名 …

jaxb xsd生成xml_使用JAXB和Jackson从XSD生成JSON模式

jaxb xsd生成xml在本文中&#xff0c;我演示了一种从XML Schema &#xff08;XSD&#xff09;生成JSON Schema的 方法 。 在概述从XML Schema创建JSON Schema的方法的同时&#xff0c;本文还演示了JAXB实现的使用&#xff08;与JDK 9捆绑在一起的xjc版本2.2.12-b150331.1824 [b…

C语言中结构体struct的用法

点击蓝字关注我们定义结构体变量下面举一个例子来说明怎样定义结构体变量。struct string { char name[8]; int age; char sex[2]; char depart[20]; float wage1, wage2, wage3, wage4, wage5; }person;这个例子定义了一个结构名为string的结构体变量person。还可以省略变量名…

html全屏漂浮,jquery全屏漂浮广告插件,可点击关闭(原创)

jquery全屏漂浮广告插件 兼容主流浏览器 实现简单 调用简单 在线预览 源码下载jquery全屏漂浮广告插件 兼容主流浏览器 实现非常简单说明&#xff1a;jquery在1.9开始不支持.live()方法的写法而改用.on()&#xff0c;见http://jquery.com/upgrade-guide/1.9/#live-removed.该插…

C++ 面试考点(二)

点击蓝字关注我们11、extern 用法&#xff1f;extern 修饰变量的声明如果文件a.c 需要引用b.c 中变量int v&#xff0c;就可以在a.c 中声明extern int v&#xff0c;然后就可以引用变量v。extern 修饰函数的声明如果文件a.c 需要引用b.c 中的函数&#xff0c;比如在b.c 中原型是…

内存不能为read进不去桌面_四级报名进不去怎么办

英语四级报名进不去怎么办?这里提供有两种方法&#xff0c;一种是重复刷新&#xff0c;直到页面出现;另外一种就是错峰报名&#xff0c;叉开登录高峰期。很多考生在报名的时候遇到困难&#xff0c;最多的就是报名页面进不去&#xff0c;这个时候有一些考生就会产生疑惑&#x…

C语言线程库的使用,这篇值得收藏!

点击蓝字关注我们1. 线程概述线程是轻量级的进程&#xff08;LWP&#xff1a;light weight process&#xff09;&#xff0c;在 Linux 环境下线程的本质仍是进程。在计算机上运行的程序是一组指令及指令参数的组合&#xff0c;指令按照既定的逻辑控制计算机运行。操作系统会以进…

alexeyab darknet 编译_【目标检测实战】Darknet—yolov3模型训练(VOC数据集)

原文发表在&#xff1a;语雀文档0.前言本文为Darknet框架下&#xff0c;利用官方VOC数据集的yolov3模型训练&#xff0c;训练环境为&#xff1a;Ubuntu18.04下的GPU训练&#xff0c;cuda版本10.0&#xff1b;cudnn版本7.6.5。经过一晚上的训练&#xff0c;模型20个类别的mAP达到…

html字符串转svg,【SVG】如何操作SVG Text

上周我们学习了如何使用元素创建SVG文本。在实例中我们设置了x和y坐标来定位文本&#xff0c;也尝试了给SVG文本中的每个字符定位。关于元素还有很多内容。在处理SVG文本时&#xff0c;不要局限于x和y属性。元素还有几个可以添加的属性&#xff0c;现在我们开始讨论吧。dx和dy属…

C++ 面试考点(三)

点击蓝字关注我们21、构造函数和析构函数可以调用虚函数吗&#xff0c;为什么在C中&#xff0c;提倡不在构造函数和析构函数中调用虚函数&#xff1b;在构造函数和析构函数调用的所有函数(包括虚函数)都是编译时确定的, 虚函数将运行该类中的版本.因为父类对象会在子类之前进行…