jQuery实现网站添加高亮突出显示效果的方法

本文实例讲述了jQuery实现网站添加高亮突出显示效果的方法。分享给大家供大家参考。具体如下：

这段jquery代码演示了如何把整个页面遮罩起来，突出显示某些东西

$(function() {
  var docHeight = $(document).height();
  $("body").append("<div id='overlay'></div>");
  $("#overlay")
   .height(docHeight)
   .css({
     'opacity' : 0.4,
     'position': 'absolute',
     'top': 0,
     'left': 0,
     'background-color': 'black',
     'width': '100%',
     'z-index': 5000
   });
});

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

赞 (0)

相关推荐

  • 基于jquery实现后台左侧菜单点击上下滑动显示

    基于jquery实现后台左侧菜单点击上下滑动显示

    今天做了一个左侧菜单的效果,做后台的时候应该会经常用到这个效果的,代码同样是简洁明了,复制即可用:效果图如下: 代码如下:(这个上下箭头的图标如上,图标可自己换) 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>后台左侧

  • jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果

    jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果

    本文实例讲述了jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果.分享给大家供大家参考.具体如下: 这是一款jquery菜单特效,点击后高亮背景,个性的菜单特效.网上见到比较多的菜单了,不过像这样这么简单的方法来实现却不多见,本菜单整体简洁,点击导航栏上的任意菜单项后,该菜单项的背景变成黑色,并且鼠标移走后,仍然固定保持黑色,记住了菜单的位置. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-menu-set-focus-

  • jQuery实现当前页面标签高亮显示的方法

    本文实例讲述了jQuery实现当前页面标签高亮显示的方法.分享给大家供大家参考.具体实现方法如下: function nav(name, csskey,cssvalue) { var url = window.location.pathname + window.location.search; var v1 = ""; $(name).each(function () { v1 = "/" + $(this).attr("href"); if

  • jQuery实现高亮显示网页关键词的方法

    jQuery实现高亮显示网页关键词的方法

    本文实例讲述了jQuery实现高亮显示网页关键词的方法.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的高亮显示网页上搜索关键词的代码,当你在文本框中输入的时候,如果下面的正文中包括你输入的内容,也就是关键字,那么这些关键字是会高亮显示的,被动态添加成黄色,看上去很醒目,就像百度快照显示关键词的样子. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type&qu

  • jQuery点击弹出下拉菜单的小例子

    复制代码 代码如下: <title>导航--点击弹出内容</title>    <style type="text/css">.navgation{margin:0;padding:0;list-style-type:none;position:relative;}.navgation li {float:left;}.navgation a{padding:3px 6px;background-color:orange;color:white;te

  • Jquery 点击按钮自动高亮实现原理及代码

    其实原理很简单,我们点击的时候我们给元素加上一个自定义的attr,加上后便会有有一个匹配的样式去自动适配背景,几秒后去掉该样式恢复原状 首先在自己的js中拓展一个方法hoverEl 复制代码 代码如下: $.extend($.fn, { hoverEl:function(){ var _this = $(this); var _t = setTimeout(function(){ _this.attr("hover", "on"); }, 10); _this.at

  • Jquery简单实现GridView行高亮的方法

    本文实例讲述了Jquery简单实现GridView行高亮的方法.分享给大家供大家参考.具体实现方法如下: $("#gridID tr:not(tr:last-child)").filter(function () { return $('td', this).length && !('table', this).length }).hover(function () { $(this).toggleClass('hover_css'); }); 希望本文所述对大家的jQ

  • jQuery过滤HTML标签并高亮显示关键字的方法

    jQuery过滤HTML标签并高亮显示关键字的方法

    本文实例讲述了jQuery过滤HTML标签并高亮显示关键字的方法.分享给大家供大家参考.具体如下: jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要修改JS代码为数组,这样可过滤出多个不同的关键字,本例只是为你演示一个基本的功能,更多过滤功能请自己挖掘吧. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:

  • jQuery实现高亮显示的方法

    本文实例讲述了jQuery实现高亮显示的方法.分享给大家供大家参考.具体如下: 主要功能代码如下: var v = window.location.pathname; $(".hd ul li a").each(function (i) { var vherf = $(this).attr("href"); if (v == vherf) { $(".hd ul li").eq(i).addClass("on") } else

  • Jquery如何实现点击时高亮显示代码

    复制代码 代码如下: $(function(){ $(".menu").click(function(){ $(this).addClass("hover").siblings().removeClass("hover"); }); });

随机推荐