2 luoyuan800 luoyuan800 于 2016.02.09 20:41 提问

如何用JavaScript实现遮罩层并且可以指定位置高亮
            想要用Javascript实现一个弹出的全网页遮罩层,并且这个遮罩层可以指定高亮位置,比如高亮被遮住的某一个<div>元素。
            求教前端大神指点一二,给个例子什么的~~拜谢!![图片说明](http://img.ask.csdn.net/upload/201602/09/1455021686_557805.png)

3个回答

devmiao
devmiao   Ds   Rxr 2016.02.09 21:51
xiaoerduo123x
xiaoerduo123x   2016.02.09 22:13

我给你一个小例子吧 代码我已经给你了 你分类后直接用就可以了 最近我也在学习这个知识点 还有其他的知识点一起了
我就没有截取出来了 。有很多其他的功能 一定会帮到你的

index.html

<!doctype html>



锁频遮罩


个人中心
登录

网站登录

账 号:
密 码:


base.js

// JavaScript Document
//前台调用
var $ =function(_this){
return new Base();
}
//基础类
function Base(_this){//创建一个类
//创建一个数组来获取一个节点和节点数组
this.elements=[];
if(_this!=undefined){
this.elements[0]=_this;
}

}
//创建一个数组来获取一个节点和节点数组
//Base.prototype.elements=[];这是是在类外面定义的,所以要把它放在类里面进行私有化
Base.prototype.getId=function(id){
this.elements.push(document.getElementById(id));
return this;
};
//获取元素节点
Base.prototype.getTagName=function(tag){
var tags=document.getElementsByTagName(tag);
for(var i=0;i<tags.length;i++){
this.elements.push(tags[i]);
}
return this;
};
//获取Class节点的信息
Base.prototype.getClass=function(className){
var all=document.getElementById('header').getElementsByTagName('*');
for(var i=0;i<all.length;i++){
if(all[i].className==className){
this.elements.push(all[i]);
}
}
return this;

}
//获取某一个节点
Base.prototype.getElement=function(num){
var element=this.elements[num];
this.elements=[];
this.elements[0]=element;
return this;
}
//设置CSS
Base.prototype.css=function(attr,value){//这里的参数是两个,
for(var i=0;i<this.elements.length;i++){

    if(arguments.length==1){//当参数的长度等于1的时候,就返回这个元素的style
    //这个只能获取d行内样式,不能获取demo1.css中的样式
        //return this.elements[i].style[attr];
        return getStyle(this.elements[i],attr);
    }
    this.elements[i].style[attr]=value;
    }
return this;

}
//设置innerHTML
Base.prototype.html=function(str){
for(var i=0;i<this.elements.length;i++){
if(arguments.length==0){//这里判断参数是否为0个,如果是0个则获取这个的innerHTML
return this.elements[i].innerHTML;//一旦这么设置就不能实现连缀了
}
this.elements[i].innerHTML=str;
}
return this;

}
//添加class属性
Base.prototype.addClass=function(className){
//先循环一下,看有多少个颜色
for(var i=0;i<this.elements.length;i++){
if(!hasClass){//查看传进来的属性原来是否存在
this.elements[i].className+= ' '+className;
}
}
return this;

}
//删除class属性
Base.prototype.removeClass=function(className){
for(var i=0;i<this.elements.length;i++){
if(!this.elements[i].className.match(new RegExp(('//s|^')+className+'(//s|$'))){//查看传进来的属性原来是否存在
this.elements[i].className=this.elements[i].className.replace(new RegExp(('//s|^')+className+'(//s|$)'),' ');
}
}
return this;

}
//添加link或style的CSS规则
Base.prototype.addRule=function(num,selectorText,cssText,position){
var sheet=document.styleSheets[num];
if(typeof sheet.insertRule!='undefined'){//w3c
sheet.insertRule(selectorText+'{'+cssText+'}',position);
}else if(typeof sheet.addRule!='undefined'){//ie
sheet.addRule(selectorText,cssText,position);
}
return this;//返回this才能实行连缀功能
}
//删除link或style的CSS规则
Base.prototype.removeRule=function(num,index){
var sheet=document.styleSheets[num];
if(typeof sheet.deleteRule!='undefined'){//W3C
sheet.deleteRule(index);
}else if(typeof sheet.removeRule!='undefined'){//IE
sheet.removeRule(index);
}
return this;
}
//设置鼠标y移入移出的事件
Base.prototype.hover=function(over,out){
for(var i=0;i<this.elements.length;i++){
this.elements[i].onmouseover=over;
this.elements[i].onmouseout=out;
}
return this;
}
//设置显示
Base.prototype.show=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display='block';
}
return this;
}
//设置隐藏
Base.prototype.hide=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display='none';
}
return this;
}
//设置点击事件
Base.prototype.click=function(fn){
for(var i=0;i<this.elements.length;i++){
this.elements[i].onclick=fn;
}
return this;
}
//设置物体居中
Base.prototype.center=function(width,height){
var top=(document.documentElement.clientHeight-250)/2;
var left=(document.documentElement.clientWidth-350)/2;
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.top=top+'px';
this.elements[i].style.left=left+'px';

}
return this;

}

//锁屏事件

//触法浏览器窗口事件
Base.prototype.resize=function(fn){
window.onresize=fn;
return this;
}
//锁屏事件
Base.prototype.lock=function(){
for(var i=0;i<this.elements.length;i++){

    this.elements[i].style.width=getInner().width+'px';
    this.elements[i].style.height=getInner().height+'px';
}
return this;

}
//撤销锁屏
Base.prototype.unlock=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display='none';
}
return this;
}
//拖拽功能
Base.prototype.drag=function(){
var oDiv=document.getElementById('login');
oDiv.onmousedown=function(e){
preDef(e);
var e=e||window.event;
var diffX=e.clientX-oDiv.offsetLeft;
var diffY=e.clientY-oDiv.offsetTop;
document.onmousemove=function(e){
var e=e||window.event;
oDiv.style.left=e.clientX-diffX+'px';
oDiv.style.top=e.clientY-diffY+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};

};

}
//阻止默认行为

index.js

// JavaScript Document
window.onload=function(){
$().getClass('memeber').hover(function(){
//$().getTagName('ul').show();

    $(this).css('background','url(image/arrow.png) no-repeat right center');
    $().getTagName('ul').show();
        //alert('show');
},function(){
    //$().getTagName('ul').hide();
    $(this).css('background','url(image/arrow2.png) no-repeat right center');
    $().getTagName('ul').hide();
        //alert('hide');
});
//登录框
/*
var top=(document.documentElement.clientHeight-250)/2;
var left=(document.documentElement.clientWidth-350)/2;
$('#login').css('top',top+'px').css('left',left+'px');
window.onresize=function(){
    var top=(document.documentElement.clientHeight-250)/2;
var left=(document.documentElement.clientWidth-350)/2;
   $('#login').css('top',top+'px').css('left',left+'px');
}
$('.login').click(function(){
    $('#login').css('display','block');
    $('#screen').lock;


});
$('.close').click(function(){
    $('#login').css('display','none');  
    $('#screen').unlock;
});
*/


$().getId('login').center(350,250).resize(function(){
    $().getId('login').center(350,250);
});

$().getClass('login').click(function(){
    $().getId('login').css('display','block');  
    $().getId('screen').lock();
    document.documentElement.style.overflow='hidden';
});

$().getClass('clo').click(function(){
    $().getId('login').css('display','none');   
    alert(12);
    //$().getId('screen').unlock();
});

//拖拽流程
//1.点击鼠标,选中目标
//2.对选中的目标进行移动
//3.松开鼠标
$().getId('login').drag();


//$().getId('screen').lock();

};
//在一些游览器中不支持第一种写法 支持第二种写法。

tool.js

// JavaScript Document
//最近我总是遇见一个问题,我建立了一个base库,在实现这个问题的时候考效果总是显示不出来,甚至报错的问题
//这是因为存在着浏览器的问题 接下来就谈谈夸浏览的问题

//跨浏览器获取视口的大小
function getInner(){
if(typeof window.innerWidth!='undefined'){
return{
width:window.innerWidth,
height:window.innerHeight
}
}else{
return{
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight

}
}
}
//跨浏览器获取style
function getStyle(element,attr){
if(typeof window.getComputedStyle!='undefined'){//W3C
return window.getComputedStyle(element,null)[attr];
}else if(typeof element.currentStyle!='undefined'){//IE
return element.currentStyle[attr];
}

}
//跨浏览器判断是否有class
function hasClass(element,className){
return element.className.match(new RegExp(('//s|^')+className+'(//s|$)'));
}
//阻止默认行为
function preDef(event){
var e =getEvent(event);
if(typeof e.preventDefault!='undefined'){
e.preventDefault();
}else{
e.returnValue=false;
}
}

index.css

@charset "utf-8";
/* CSS Document */
body{
margin:0;
padding:0;
background:url(image/header_bg.png) repeat-x ;
}
#header{
width:900px;
height:30px;
margin:0 auto;
font-size:12px;

}
#header .logo{
width:100px;
height:30px;
float:left;

}
#header .logo img{
display:block;
}
#header .memeber{

width:80px;
height:30px;
float:right;
line-height:30px;
background:url(image/arrow2.png) no-repeat right center ;
cursor:pointer;

}
#header ul{
padding:0;
margin:0;
position:absolute;
top:30px;
left:1050px;
width:100px;
height:120px;
text-indent:20px;
display:none;

}
#header ul li{
list-style:none;
line-height:30px;
top:10px;
background:url(image/arrow3.gif) no-repeat left center;

}
#header ul li a{
text-decoration:none;
display:block;

}
#header ul li a:hover{
background:#0C3 url(image/arrow4.gif) no-repeat left center;
}
#header .login{
float:right;
width:35px;
height:30px;
line-height:30px;
cursor:pointer;
}
#screen{
position:absolute;
top:0;
left:0;
background:#000;
z-index:9998;
opacity:0.3;
filter:alpha(opacity=30);

}
#login{
width:350px;
height:250px;
border:1px solid #ccc;
position:absolute;
display:none;
z-index:9999;
background:#FFF;
}
#login h2{
height:40px;
text-align:center;
letter-spacing:1px;
background:url(../image/login_header.png) repeat-x;
font-size:14px;
margin:0;
padding:0px;
line-height:40px;

}
#login img{
float:right;
position:relative;
top:10px;
right:5px;
cursor:pointer;
}
#login div.user,#login div.pass{
font-size:14px;
color:#666;
padding:10px 5px;
text-align:center;
}
#login input.text{
width:200px;
height:25px;
border:1px solid #ccc;

}
#login .button{
text-align:center;

}
#login input.submit{
width:107px;
height:30px;
background:url(../image/login_button.png) no-repeat;

}

cai13826443073
cai13826443073   2016.04.22 14:35

参考这个,不需要第三方库

JavaScript高亮文本

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!