js遮罩】的更多相关文章

对于前端开发者来说,js是不可缺少的语言.现在我开始把我日常积累的一些js效果或者通过搜索自己总结的一些效果分享给大家,希望能够帮助大家一起进步,也希望大家能够多多支持! 1.今天我先分享一个遮罩层弹框效果: <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>DIV CSS遮罩层</title…
-------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery弹出窗口 By Await [2009-11-22] //------------------------------------------------------------…
//调用方法 //关闭事件<button onclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来 //调用LayerShow(text),text为参数,可以写入想要写入的提示语 //本方法在调用时会自动生成一个添加到body的div,并且会在调用隐藏遮罩层 LayerHide()时删除div //封装遮罩层div显示效果 //将其放在页面的div中加载 function loadDiv(text) { var div = &q…
1.在web开发中经常遇到遮罩层的效果,可以将这种常用方法通用化 function showid(idname){ var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6); var newbox = document.getElementById(idname); newbox.style.zIndex = &…
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全屏div</title> <style> html,body { margin:0; height:100%; } #test { width:100%; height:100%; background-color:#000; position:absolute; top:0; le…
1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z…
function ShowLoadingMaskLayer(text) { var htmlContent = '<div id=\"masklayer\">' + '<div id=\"covered\" style=\"position:fixed;_position:absolute;z-index:888;top:0px; left:0px;width:100%;height:100%;background-color:#6969…
this.WaitMessage = function (msg) { $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body"); if (msg == null) { msg = &quo…
验证: jQuery formValidator,Validform; 提示框: artDialog, lhgDialog,jBox,jQuery textbox plugin 文件批量上传:uploadify, 在线文档浏览:flexpaper 日历:WdatePicker thickbox/ jQuery powerFloat万能浮动层下拉层插件 jquery-loadmask.js 遮罩层插件 jCarouselLite.js 幻灯片切换 弹窗:jquery.box.3.0.js tab页…
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-router-dom.redux.styled-components)开发的一套博客后台管理系统,用于前端小站的管理,主要功能包括游客浏览.文章管理.类别管理.评论通知.推荐设置和用户管理 [访问地址] 域名:https://admin.xiaohuochai.cc Github: https://g…
使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-router-dom.redux.styled-components)开发的一套博客后台管理系统,用于前端小站的管理,主要功能包括游客浏览.文章管理.类别管理.评论通知.推荐设置和用户管理 [访问地址] 域名:https://admin.xiaohuoch…
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码随然不难,不过要能想到这个创意,并成功应用却很难! 另外,对于初学者,这也是不错的学习例子.含Jquery插件写法,css3等 英文教程:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/源码下载:http://tympanus.net…
新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2.js一样,都是用来制作单张图片切换特效的javascript类,不过,迄今为止XMosaic.js实现的特效是最炫的,炫到我以后很长一段时间都不用再写图片切换类了. XMosaic.js,马赛克图片切换特效示例页 XMosaic.js的使用方法请查看示例页源代码.其中html结构与一般图片切换的h…
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 { -webkit-box-shadow: 3px 3px 3px; -moz-box-shadow: 3px 3px 3px; box-shadow: 3px 3px 3px; } .box-shadow-2 { -webkit-box-shadow: 0 0 10px #0CC; -moz-box-sha…
要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并且遮罩层笼罩整个页面,使整个页面的其他元素暂时失去行为. 遮罩层的实现:相对于body绝对定位,宽度和高度都和body相同,并且有一定的透明度,使得下面的元素能够被看到.原先的元素的z-index为0,遮罩层的z-index在弹出登录小窗口和原先元素的之间. 说的不是很清楚,还是看代码吧! <!DO…
1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DIV CSS遮罩层</title&…
这个代码是我以前测试时候的代码了,主要用到的知识点是opacity和filer分别实现 “标准浏览器”和IE浏览器下的半透明,使用js的document.body.offsetwidth 和screen.height来控制遮罩层的宽高,通过element.style.display属性来控制 遮罩层显示与否 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/…
直接用代码来说明 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskTest.aspx.cs" Inherits="Test07.MaskTest" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head run…
//本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> func…
阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg…
Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为. 使用jQuery BlockUI,首先需要在jQuery后面引用 jquery.blockUI.js jquery.blockUI.js插件下载地址:http://jquery.malsup.com/block/ 用法很简单,组织用户对页面的交互: $.…
cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.getBusyOverlay(id, overlay, busy) 为遮罩层的方法, id:需要写viewport,详情请看Js内部. overlay:主要是遮罩层的样式,遮罩层显示字体的样式. busy:加载进度圈的样式. 2.xval.settext("正在登录,请稍后......");…
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <head>    <meta charset=" utf-8">…
JS部分 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script type="text/javascript"> jQuery(document).ready(function ($) { if (window.history && window.history.pushState) { $(window).on('p…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DIV CSS遮罩层</title&…
借用一下喜马拉雅的效果图,比较一下下面的遮罩层的高度:       我们可以看到它的遮罩层一直都是只遮住的下面.开始想着怎么用CSS实现,几经测试也没弄出来,如果正在看这篇文章的你,知道如何用CSS达到这种效果,欢迎留言. 我来说一下我用js的解决方法. 原理很简单,遮罩层高度 = 选集弹层的下边距离 到 窗口底边的距离. 先看下结构: 实现效果核心代码: $(".js_show_chapter").click(function () { var maskHeight; var obj…
1:什么是遮罩层 遮罩层:我是弹也一个(遮罩层)还有一个(内容层),下面上图片看一效果 我们看到一个灰蒙蒙的遮盖(其实也是一个层)还有一个层(也就是我们展示的内容). 2:  弹出层效果居中分析 在这个图片中我们还看到我们弹出的层刚好在中间.下面在上个图看清楚的效果: 如果我们是一个“点”放在中间那么当然是$(window).width()/2,但我们是一个层,它有自已的高度和宽度,如果起始还是从中心点开始,你想它会在居间显示,显然 不对,它们靠右边了,所以我们减去它的高和宽 同是除以2 var…
[功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_now").click(function(){ $.ajax({ url:"/userCenter/getProject.jspx", data:{"userId":"${currt.id}"}, success:function(resul…