Welcome 微信登录

首页 / 脚本样式 / JavaScript

基于jquery实现导航菜单高亮显示(两种方法)

基于jquery实现导航菜单高亮显示(两种方法)

项目需求:实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式。点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的.效果图如下:示例代码一:具体示例代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D...
简单纯js实现点击切换TAB标签实例

简单纯js实现点击切换TAB标签实例

一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用。默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果使用方法:1、将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可相关链接:几行简单的jQuery代码搞定tab标签切换效果展示效果图:效果展示 源码下载<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
纯css实现窗户玻璃雨滴逼真效果

纯css实现窗户玻璃雨滴逼真效果

这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。案例效果查看演示源码下载看到上面的效果是不是有点像人站室内看窗外雨中的夜景,窗户上雨滴的效果是那么的真实,窗外的夜景却又是那么的模糊。咱们不在诗意化了,我想大家更为关注的是用什么样的技术来实现这样的一个效果。预处理器在这个示例中,使用了HAML和Sass...
如何屏蔽防止别的网站嵌入框架代码

如何屏蔽防止别的网站嵌入框架代码

你的网页是否被别人拿来使用呢,目前有一些聚合网站,在顶部或底部加上自己的广告和LOGO后,开始肆意抓取他站内容,号称提供精华资讯;也有一些站被加入框架(Frame)导致流量被刷。被别人这样利用,虽然也能增加自己的流量,但不知情的读者会认为是他站的内容,导致用户流失。下面通过几种方法给大家介绍如何屏蔽防止别的网站嵌入框架代码。方法一:<SCRIPT LANGUAGE=javascript> if (top.location != self.loc...
js实现适用于素材网站的黑色多级菜单导航条效果

js实现适用于素材网站的黑色多级菜单导航条效果

本文实例讲述了js实现适用于素材网站的黑色多级菜单导航条效果。分享给大家供大家参考。具体如下:这是一款适用于素材网站的黑色多级菜单导航条,无需jQuery,采用CSS+javaScript来实现,整体效果非常棒,用来学习CSS也是很不错的。运行效果截图如下:在线演示地址如下:http://demo.jb51.net/js/2015/js-black-color-nav-style-codes/具体代码如下:<!DOCTYPE html PUBLIC ...
jQuery实现的手机发送验证码倒计时效果代码分享

jQuery实现的手机发送验证码倒计时效果代码分享

这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码。效果描述:注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果:首先检测手机是否符合1开头,11位数字的格式;若不符合,则提示错误信息并返回false;否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时。运行效果:----------------------...
js实现带圆角的两级导航菜单效果代码

js实现带圆角的两级导航菜单效果代码

本文实例讲述了js实现带圆角的两级导航菜单效果代码。分享给大家供大家参考。具体如下:这是一款使用JS做的圆角菜单,支持两级菜单显示,本人比较喜欢的风格,修改使用方便,新手也能上手快。使用有几张圆角图片来修饰了菜单,喜欢的朋友可以下载代码留作收藏使用。真心不错的蓝色导航条代码。运行效果截图如下:在线演示地址如下:http://demo.jb51.net/js/2015/js-cicle-nav-menu-style-codes/具体代码如下:<!DOC...
javascript实现支持移动设备画廊

javascript实现支持移动设备画廊

这是一款不依赖任何js框架、纯javascript实现的画廊效果。它支持移动设备手势操作,如手势触摸滑动、放大和关闭图片,它还支持PC上的键盘操作,总之它是WEB开发者不可或缺的图片画廊插件,它叫photoswipe。展示效果图如下:查看演示 下载源码HTML首先加载所需的CSS和js文件。<link rel="stylesheet" href="css/photoswipe.css"> <link rel="stylesheet" hr...
jquery性能优化高级技巧

jquery性能优化高级技巧

有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力。随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运行等问题。因此我们有必要对我们自己书写的jquery代码进行优化,以达到更快捷、更流畅的运行效果。jquery性能优化高级技巧,下面主要从七个方面对jquery性能优化做介绍:1.通过CDN(Content Delivery Network)引入jQuery库2.减少DOM操作3.适当使用原...
jquery实现适用于门户站的导航下拉菜单效果代码

jquery实现适用于门户站的导航下拉菜单效果代码

本文实例讲述了jquery实现适用于门户站的导航下拉菜单效果代码。分享给大家供大家参考。具体如下:这是一款应用了jQuery+CSS共同编写实现的网页导航菜单,采用浅蓝色的布局方式,整体格调淡雅清新,简洁大方,不失为一款好菜单。本特点的特点是兼容好,在火狐/IE下都有良好表现,而且在有二级子菜单的地方,主菜单上都会有一个小三角标识,很好的提升了用户体验,相信你也会喜欢的。运行效果截图如下:在线演示地址如下:http://demo.jb51.net/js/2...
jquery实现的仿天猫侧导航tab切换效果

jquery实现的仿天猫侧导航tab切换效果

本文实例讲述了jquery实现的仿天猫侧导航tab切换效果。分享给大家供大家参考。具体如下:这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若初次运行有错误请刷新一页面即可。本菜单是仿天猫商城的菜单,大块的div菜单,支持超多的产品分类,大网站风格,大气实用的多分类网页菜单。运行效果截图如下:在线演示地址如下:http://demo.jb51.net/js/2015/jquery-ftmail-nav-tab-cha-codes/具体代码...
jquery实现的蓝色二级导航条效果代码

jquery实现的蓝色二级导航条效果代码

本文实例讲述了jquery实现的蓝色二级导航条效果代码。分享给大家供大家参考。具体如下:这是一款网站导航条效果代码,菜单最多可支持两级,适合较多类型的网站使用,不喜欢蓝色的可自己修改成其它颜色,整体效果不错,挺简单的网站导航。运行效果截图如下:在线演示地址如下:http://demo.jb51.net/js/2015/jquery-blue-2level-nav-style-codes/具体代码如下:<!DOCTYPE html PUBLIC "-/...
js实现的黑背景灰色二级导航菜单效果代码

js实现的黑背景灰色二级导航菜单效果代码

本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码。分享给大家供大家参考。具体如下:这是一款js实现的黑背景灰色二级导航菜单,兼容IE6、firefox的js+css横向二极导航菜单。挺简洁,不过很清新,二级菜单是水平显示在主菜单的下方,采用流行的微软雅黑字体,若不想用这种字体,可换成默认的宋体即可。运行效果截图如下:在线演示地址如下:http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-st...
jQuery仿360导航页图标拖动排序效果代码分享

jQuery仿360导航页图标拖动排序效果代码分享

jquery实现360浏览器导航页图标拖动从新排序特效源码是一款模仿360浏览器导航页网站图标拖动排序的代码。本段代码适应于所有网页使用,有兴趣的朋友们可以学习一下。运行效果图: ----------------------查看效果 下载源码-----------------------小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。为大家分享的360导航页图标拖动排序效果代码如下<!DOCTYPE html PUBLIC "-//W3C//...
javascript中SetInterval与setTimeout的定时器用法

javascript中SetInterval与setTimeout的定时器用法

示例一:查看演示 下载源码setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。也就是说setTimeout()只执行一次,setInterval()可以执行多次。两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数。setTimeOut用法setTimeout函数的用法如下:var timeoutID...
<< 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 >>