jquery实现图片灯箱明暗的遮罩效果

效果如下：

DIV结构：

jquery实现：

调用：

赞 (0)

相关推荐

  • jQuery点缩略图弹出层显示大图片

    jQuery点缩略图弹出层显示大图片

    2015年繁忙的一月份,无更多时间去学习ASP.NET MVC程序,二月份又是中国的新年,长达半个月的假期,望回到老家中,在无电脑无网络的日子里,能有更多时间陪伴年迈的父母亲. 今天学习jQuery的相关知识,应用到图片上,用户点一点图片,放大显示图片功能. 创建一个控制器FebY15Controller: 接下来创建视图Index: 标记1,添加图片样式: 标记2,添加htm代码,原片显示以及放大图片的占位div标签: 标记3,引用jQuery类库. 标记4,编写jQuery程序: 下面是动态

  • jquery简单的弹出层浮动层代码

    jquery 智能弹出层,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmln

  • jQuery+css+html实现页面遮罩弹出框

    jQuery+css+html实现页面遮罩弹出框

    页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: 复制代码 代码如下: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> <div id="fullbg"></div> <div id="dialog"&g

  • jquery实现的弹出层登录和全屏层注册特效代码分享

    jquery实现的弹出层登录和全屏层注册特效代码分享

    本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下: jquery实现的弹出层登录和无刷新切换全屏层注册特效源码,是一段非常适合现代审美观的网站登录和注册效果代码,本段实例主要表现在点击登录后在当前页面内弹出登录遮罩层,而点击注册链接时,在当前页面内无刷新显示全屏注册层效果,是一款非常实用的特效代码,值得大家学习. 运行效果图:                           -------------------查看效果 下载源码-----------------

  • jQuery弹出层插件Lightbox_me使用指南

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器. 1.Lightbox_me插件功能 用于显示弹出层 2.Ligh

  • 简单的Jquery遮罩层代码实例

    Css代码 复制代码 代码如下: #brg{ width: 100%; height: 100%; background: #333; position: absolute; top: 0; left: 0; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; position: absolute; top: 0; left: 0; display: none;}#showdiv{ width: 100%; height: au

  • 使用jQuery实现图片遮罩半透明坠落遮挡

    默认九宫格图片排列效果,当鼠标悬停在图片上后,会从图片的上方下滑一个半透明遮罩的效果 同时出现一些文字介绍 使用方法: 1.将head中的css样式引入到你的网页中 2.将代码部分拷贝到你的网页body结束前的地方即可 (js.图片采用绝对路径,不建议修改) 复制代码 代码如下: $(function(){     $('.sgw_img dt').hover(function(){         $(this).children('.box').stop(true,true).delay(1

  • js制作带有遮罩弹出层实现登录注册表单特效代码分享

    js制作带有遮罩弹出层实现登录注册表单特效代码分享

    本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图:                     ----------------------查看效果   源码下载----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. jquery制作的带有遮罩弹出层实现登录注册等表单的特效源码,是一段实现了点击后在原始页面上弹出想用页面的代码.  为大家分享的js制作带有遮罩弹出层实现登录注册表单代码特效

  • jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

    本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用. 屁话不多放,无码无真相! 复制代码 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.

  • Jquery 实现弹出层插件

    弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 1:遮罩层 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask 复制代码 代码如下: .mask {     position: fixed;     width: 100%;     height: 100%;     backgr

  • jquery实现可拖拽弹出层特效

    功能很简单,却非常的实用,代码更加的简洁,这里就不多废话了 奉上源码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><

  • Jquery实现遮罩层的方法

    本文实例讲述了Jquery实现遮罩层的方法.分享给大家供大家参考.具体如下: 1.假设#main为页面body中的最外层Div标签 2.背景被遮罩后,显示的弹出窗(默认是不显示的,所包含的CSS这里就不贴了): <!-- Status Bar Start --> <div id="warning-dialog" class="status warning center-top no-display"> <p class="cl

随机推荐