JavaScript，封装库--修改元素选择器
就是将构造库函数修改成元素选择器，像css那样，输入#xxx .xxx xxx （获取指定id下的指定class下的指定标签元素）
修改后的基础库
/**
*feng_zhuang_ku_1.0版本，js封装库，2016/12/29日：林贵秀
**/
/** 前台调用
* 每次调用$()创建库对象,使其每次调用都是独立的对象
* $()创建库对象,有一个可选参数，参数有两种方式，1是传入的this，2是传入的字符串
* 可选参数说明：
* 传入的this，this，就是当前对象本身
* 传入的字符串，代表获取元素选择器
* 参数是元素选择器(id值、class值、标签名称)其中一样的字符串方式，或者是其中几样的字符串组合方式
* 获取一个元素传参方式 ‘#xxx‘( 表示获取id)，‘.xxx‘(表示获取class)，‘xxx‘(表示获取标签)
* 从父元素向下获取组合方式按照，一个元素传参方式加上空格，如: (‘#sdf .hjk p‘)表示获取id为sdf元素下的class为hjk下的p元素
**/
var $ = function (args) {
return new feng_zhuang_ku(args);
};
/**
*定义封装库构造函数，类库
**/
function feng_zhuang_ku(args) {
/** jie_dian属性，创建数组，初始化，保存获取到的元素节点，返回数组
**/
this.jie_dian = [];
if (typeof args == ‘string‘) { //如果传入的是字符串，说明是获取元素选择器
if (args.indexOf(‘ ‘) != -1) {
/**从父元素向下获取组合方式**/
var fen_ge = args.split(‘ ‘); //将接收的组合式元素名称分割成数组
var lin_shi = []; //保存临时对象的数组，解决被覆盖问题
var fu_yuan_su = []; //保存父元素的数组
for (var i = 0; i < fen_ge.length; i++) {
if (fu_yuan_su.length == 0)fu_yuan_su.push(document); //如果没有父节点，就把document放入父节点
switch (fen_ge[i].charAt(0)) { //判断字符串的第一个字符是什么
case ‘#‘: //说明是id
lin_shi = []; //清理临时数组，以便父节点失效，子节点有效
lin_shi.push(this.huo_qu_id(fen_ge[i].substring(1))); //去除第一个字符，获取到传入的id元素，保存到临时数组
fu_yuan_su = lin_shi; //将临时节点数组放入父节点数字
break; //说明是class
case ‘.‘:
lin_shi = []; //清理临时数组，以便父节点失效，子节点有效
for (var f = 0; f < fu_yuan_su.length; f++) { //根据父节点的长度循环
var tempss = this.huo_qu_class(fen_ge[i].substring(1), fu_yuan_su[f]); //获取到父节点下的子节点
for (var n = 0; n < tempss.length; n++) { //循环子节点，将每次循环的子节点添加到临时数组
lin_shi.push(tempss[n]);
}
}
fu_yuan_su = lin_shi; //将临时节点数组放入父节点数字
break;
default: //说明是标签
lin_shi = []; //清理临时数组，以便父节点失效，子节点有效
for (var j = 0; j < fu_yuan_su.length; j++) { //根据父节点的长度循环
var temps = this.huo_qu_name(fen_ge[i], fu_yuan_su[j]); //获取到父节点下的子节点
for (var k = 0; k < temps.length; k++) { //循环子节点，将每次循环的子节点添加到临时数组
lin_shi.push(temps[k]);
}
}
fu_yuan_su = lin_shi; //将临时节点数组放入父节点数字
}
}
this.jie_dian = lin_shi; //将临时数组放入jie_dian数组
} else {
/**一个元素传参方式**/
switch (args.charAt(0)) { //判断字符串的第一个字符是什么
case ‘#‘: //说明是id
this.jie_dian.push(this.huo_qu_id(args.substring(1))); //去除第一个字符，获取到传入的id元素
break;
case ‘.‘: //说明是class
this.jie_dian = this.huo_qu_class(args.substring(1)); //去除第一个字符，获取到传入的class元素
break;
default: //说明是标签
this.jie_dian = this.huo_qu_name(args); //获取到传入的标签元素
}
}
} else if (typeof args == ‘object‘) { //如果传入的是对象，说明是this，就是当前对象本身
if (args != undefined) {
this.jie_dian[0] = args;
}
}
}
/**$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$**/
/**$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$**/
/**------------------------------------------------获取元素标签开始--------------------------------------------**/
/**获取元素标签说明：
* jie_dian属性，保存获取到的元素节点，返回数组,
*
* huo_qu_id()方法,通过id获取元素标签，参数是id值，将获取到的元素对象返回给方法本身，无法连缀
* huo_qu_name()方法，通过标签名称获取相同标签名的元素，
* huo_qu_class()方法，获取相同class属性的节点，返回包含相同class属性的节点数组，返回给方法本身,无法连缀
*
* huo_qu_name_zhi()方法，通过元素name值获取指定元素，适用于获取表单元素,
* guo_lv_jie_dian()方法，获取多个节点时，过滤jie_dian属性里的数组，就是过滤掉指定索引外的元素对象
* huo_qu_zi_jie_dian()方法，获取一个元素下的子元素
**/
/** huo_qu_id()方法,通过id获取元素标签，参数是id值，将获取到的元素对象返回给方法本身，无法连缀
**/
feng_zhuang_ku.prototype.huo_qu_id = function (id) {
return document.getElementById(id);
};
/** huo_qu_name()方法，通过标签名称获取相同标签名的元素，返回包含相同标签名的元素数组，返回给方法本身
* 两个参数：获取指定元素下的相同标签元素，参数1标签名称，参数2是要获取元素的父元素
* 一个参数：获取页面所有相同标签元素，参数是标签名称
**/
feng_zhuang_ku.prototype.huo_qu_name = function (tag, parentnode) {
var node = null;
var lin_shi = [];
if (parentnode != undefined) {
node = parentnode;
} else {
node = document;
}
var tags = node.getElementsByTagName(tag);
for (var i = 0; i < tags.length; i++) {
lin_shi.push(tags[i]);
}
return lin_shi;
};
/** huo_qu_class()方法，获取相同class属性的节点，返回包含相同class属性的节点数组，返回给方法本身,无法连缀
* 一个参数：获取整个页面指定的class属性节点，参数是class属性值
* 两个参数：获取指定元素区下的class属性节点，参数1是class属性值，参数2是要获取class属性节点的父元素节点
**/
feng_zhuang_ku.prototype.huo_qu_class = function (name, parentnode) {
var node = null;
var lin_shi = [];
if (parentnode != undefined) {
node = parentnode;
} else {
node = document;
}
var all = node.getElementsByTagName(‘*‘);
for (var i = 0; i < all.length; i++) {
if (all[i].className == name) {
lin_shi.push(all[i]);
}
}
return lin_shi;
};
/** huo_qu_name_zhi()方法，通过元素name值获取指定元素，参数是元素name值，返回元素相同name值对象集合，
* 循环元素集合，将每次循环到的元素对象添加到 jie_dian属性，适用于获取表单元素
**/
feng_zhuang_ku.prototype.huo_qu_name_zhi = function (name) {
var name_zhi = document.getElementsByName(name);
for (var i = 0; i < name_zhi.length; i++) {
this.jie_dian.push(name_zhi[i]);
}
return this;
};
/** guo_lv_jie_dian()方法，获取多个节点时，过滤jie_dian属性里的数组，就是过滤掉指定索引外的元素对象
* 参数是要保留jie_dian属性里的对象索引
**/
feng_zhuang_ku.prototype.guo_lv_jie_dian = function (num) {
var element = this.jie_dian[num];
this.jie_dian = [];
this.jie_dian[0] = element;
return this;
};
/** huo_qu_zi_jie_dian()方法，获取一个元素下的子元素
* 注意首先要获取到父元素，在使用huo_qu_zi_jie_dian()方法
* 参数是要获取的，子元素(id值、class值、标签名称)其中一样的字符串方式，
* 传参方式 ‘#xxx‘( 表示获取id)，‘.xxx‘(表示获取class)，‘xxx‘(表示获取标签)
**/
feng_zhuang_ku.prototype.huo_qu_zi_jie_dian = function (str) {
var lin_shi = []; //临时数组
for (var i = 0; i < this.jie_dian.length; i++) { //根据父元素的长度，循环出父元素
switch (str.charAt(0)) { //判断字符串的第一个字符是什么
case ‘#‘: //说明是id
lin_shi.push(this.huo_qu_id(str.substring(1))); //获取到父元素下的子元素id等于str的标签，将它添加到临时数组
break;
case ‘.‘: //说明是class
var tempss = this.huo_qu_class(str.substring(1), this.jie_dian[i]);
for (var k = 0; k < tempss.length; k++) {
lin_shi.push(tempss[k]);
}
break;
default: //说明是标签名称
var temps = this.huo_qu_name(str, this.jie_dian[i]);
for (var j = 0; j < temps.length; j++) {
lin_shi.push(temps[j]);
}
}
}
this.jie_dian = lin_shi; //将临时数组替换成节点数组
return this;
};
/**------------------------------------------------获取元素标签结束--------------------------------------------**/
/**------------------------------------------------元素节点操作开始--------------------------------------------**/
/**元素节点操作说明：
* c_css()方法，给获取到的元素设置ss样式,或者获取css样式，
* wen_ben()方法，给获取到的元素设置文本，或者获取文本
* tian_jia_class()方法，给获取到的元素添加class属性，参数是class属性值，可以连缀
* yi_chu_class()方法，给获取到的元素移除class属性，参数是要移除的class属性值，可以连缀
* she_zhi_link_css()方法，设置link连接、或style内嵌、中的CSS样式
* yi_chu_link_css()方法，移除link连接、或style内嵌、中的CSS样式
**/
/** c_css()方法，给获取到的元素设置ss样式,或者获取css样式，
* 两个参数：设置样式，参数1样式名称，参数2样式值,设置的行内样式
* 一个参数：获取样式，参数是样式名称，无法连缀，获取即可用获取行内也可以获取连接
**/
feng_zhuang_ku.prototype.c_css = function (attr, value) {
for (var i = 0; i < this.jie_dian.length; i++) {
if (arguments.length == 1) {
return getStyle(this.jie_dian[i], attr); //getStyle()函数库函数，跨浏览器获取元素Style，样式指定属性
} else {
this.jie_dian[i].style[attr] = value;
}
}
return this;
};
/** wen_ben()方法，给获取到的元素设置文本，或者获取文本
* 有参：设置文本，参数是要设置的文本字符串。
* 无参：获取文本。无法连缀
**/
feng_zhuang_ku.prototype.wen_ben = function (str) {
for (var i = 0; i < this.jie_dian.length; i++) {
if (arguments.length == 0) {
return this.jie_dian[i].innerHTML;
}
this.jie_dian[i].innerHTML = str;
}
return this;
};
/** tian_jia_class()方法，给获取到的元素添加class属性，参数是class属性值，可以连缀
**/
feng_zhuang_ku.prototype.tian_jia_class = function (classname) {
for (var i = 0; i < this.jie_dian.length; i++) {
if (hasClass(this.jie_dian[i], classname)) { //hasClass()函数库函数，判断一个元素的class属性值是否存在
this.jie_dian[i].className += ‘ ‘ + classname;
}
}
return this;
};
/** yi_chu_class()方法，给获取到的元素移除class属性，参数是要移除的class属性值，可以连缀
**/
feng_zhuang_ku.prototype.yi_chu_class = function (classname) {
for (var i = 0; i < this.jie_dian.length; i++) {
if (hasClass(this.jie_dian[i], classname)) {
this.jie_dian[i].className = this.jie_dian[i].className.replace(new RegExp(‘(\\s|^)‘ + classname + ‘(\\s|$)‘), ‘ ‘);
}
}
return this;
};
/** she_zhi_link_css()方法，设置link连接、或style内嵌、中的CSS样式
* 在Web应用中，很少用到添加CSS规则和移除CSS规则，一般只用行内和Class；因为添加和删除原本的规则会破坏整个CSS的结构，所以使用需要非常小心。
* 直接在库对象下使用 如：$().she_zhi_link_css()
* 四个参数：
* 参数1，样式表索引位置，就是要操作的样式表位置索引，第几个样式表【数值】
* 参数2，要添加的选择器名称，【字符串】
* 参数3，要添加的样式名称和值，如：background:#ff2a16 【字符串】
* 参数4，将样式和选择器添加到样式表什么位置，【数值】
**/
feng_zhuang_ku.prototype.she_zhi_link_css = function (num, selectorText, cssText, position) {
var sheet = document.styleSheets[num];
if (typeof sheet.insertRule != ‘undefined‘) {
sheet.insertRule(selectorText + "{" + cssText + "}", position);
} else if (typeof sheet.addRule != ‘undefined‘) {
sheet.addRule(selectorText, cssText, position);
}
return this;
};
/** yi_chu_link_css()方法，移除link连接、或style内嵌、中的CSS样式
* 在Web应用中，很少用到添加CSS规则和移除CSS规则，一般只用行内和Class；因为添加和删除原本的规则会破坏整个CSS的结构，所以使用需要非常小心。
* 直接在库对象下使用
* 两个参数：
* 参数1，样式表索引位置，就是要操作的样式表位置索引，第几个样式表【数值】
* 参数2，删除样式表里的第几个选择器【数值】
**/
feng_zhuang_ku.prototype.yi_chu_link_css = function (num, position) {
var sheet = document.styleSheets[num];
if (typeof sheet.deleteRule != ‘undefined‘) {
sheet.deleteRule(position);
} else if (typeof sheet.removeRule) {
sheet.removeRule(position);
}
return this;
};
/**------------------------------------------------元素节点操作结束--------------------------------------------**/
/**------------------------------------------------元素事件开始--------------------------------------------**/
/**元素事件说明：
* shu_biao_yi_ru_yi_chu()方法，给元素设置鼠标移入移出事件，接收两个参数，参数是移入和移出时的执行函数(包含代码)
* xian_shi()方法，设置元素显示,无参
* yin_cang()方法，设置元素隐藏,无参
* on_click()方法，给获取到的元素添加一个点击事件，参数是一个匿名函数（包含函数功能），
* yuan_su_ju_zhong()方法，将获取到的区块元素居中到页面，
* chuang_kou_shi_jian()方法，浏览器窗口事件，当窗口的大小变化时触发函数
* zhe_zhao_suo_ping()方法，将一个区块元素设置成遮罩锁屏区块
**/
/** shu_biao_yi_ru_yi_chu()方法，给元素设置鼠标移入移出事件，接收两个参数，参数是移入和移出时的执行函数(包含代码)
*参数1是移入时的执行函数(包含代码)
*参数2是移出时的执行函数(包含代码)
**/
feng_zhuang_ku.prototype.shu_biao_yi_ru_yi_chu = function (yi_ru, yi_chu) {
for (var i = 0; i < this.jie_dian.length; i++) {
addEvent(this.jie_dian[i], ‘mouseover‘, yi_ru);
addEvent(this.jie_dian[i], ‘mouseout‘, yi_chu);
}
return this;
};
/** xian_shi()方法，设置元素显示,无参
**/
feng_zhuang_ku.prototype.xian_shi = function () {
for (var i = 0; i < this.jie_dian.length; i++) {
this.jie_dian[i].style.display = ‘block‘;
}
return this;
};
/** yin_cang()方法，设置元素隐藏,无参
**/
feng_zhuang_ku.prototype.yin_cang = function () {
for (var i = 0; i < this.jie_dian.length; i++) {
this.jie_dian[i].style.display = ‘none‘;
document.documentElement.style.overflow = ‘auto‘;
removeEvent(window, ‘scroll‘, scrollTop); //遮罩锁屏时有用
}
return this;
};
/** on_click()方法，给获取到的元素添加一个点击事件，参数是一个匿名函数（包含函数功能），
* 循环jie_dian属性里的节点，将每次循环的节点添加元素点击事件
**/
feng_zhuang_ku.prototype.on_click = function (fu) {
for (var i = 0; i < this.jie_dian.length; i++) {
addEvent(this.jie_dian[i], ‘click‘, fu);
}
return this;
};
/** yuan_su_ju_zhong()方法，将获取到的区块元素居中到页面，
* 注意：使用此方法时，首先要在css里将目标区块设置成(绝对定位,position: absolute;)
**/
feng_zhuang_ku.prototype.yuan_su_ju_zhong = function () {
if (this.jie_dian.length == 1) {
var yan_su = null;
for (var i = 0; i < this.jie_dian.length; i++) {
yan_su = this.jie_dian[i];
}
var y_style = getStyle(yan_su, ‘display‘); //getStyle()函数库函数，跨浏览器获取元素Style，样式指定属性
if (y_style === "none") {
yan_su.style.display = "block";
}
var width = yan_su.offsetWidth;
var height = yan_su.offsetHeight;
if (y_style === "none") {
yan_su.style.display = "none";
}
var chang_w = getInner().width;
var chang_h = getInner().height;
var top = (chang_h - height) / 2;
var left = (chang_w - width) / 2;
for (var ii = 0; ii < this.jie_dian.length; ii++) {
this.jie_dian[ii].style.top = top + ‘px‘;
this.jie_dian[ii].style.left = left + ‘px‘;
}
} else {
alert("区块元素页面居中,只能设置一个区块元素，目前jie_dian数组里是多个元素请检查！")
}
return this;
};
/** chuang_kou_shi_jian()方法，浏览器窗口事件，当窗口的大小变化时触发函数
* 接收一个参数，就是触发时要执行的函数（包含函数功能）
**/
feng_zhuang_ku.prototype.chuang_kou_shi_jian = function (fn) {
for (var i = 0; i < this.jie_dian.length; i++) {
var yan_su = this.jie_dian[i];
}
addEvent(window, ‘resize‘, function () {
fn();
if (yan_su.offsetLeft > getInner().width - yan_su.offsetWidth) {
yan_su.style.left = getInner().width - yan_su.offsetWidth + ‘px‘;
}
if (yan_su.offsetTop > getInner().height - yan_su.offsetHeight) {
yan_su.style.top = getInner().height - yan_su.offsetHeight + ‘px‘;
}
});
return this;
};
/** zhe_zhao_suo_ping()方法，将一个区块元素设置成遮罩锁屏区块
* 注意：一般需要在css文件将元素设置成隐藏
**/
feng_zhuang_ku.prototype.zhe_zhao_suo_ping = function () {
if (this.jie_dian.length == 1) {
var yan_su = null;
for (var i = 0; i < this.jie_dian.length; i++) {
yan_su = this.jie_dian[i];
}
var chang_w = getInner().width; //getInner()函数库函数，跨浏览器获取浏览器视窗大小
var chang_h = getInner().height;
yan_su.style.width = chang_w + ‘px‘;
yan_su.style.height = chang_h + ‘px‘;
yan_su.style.position = ‘absolute‘;
yan_su.style.top = ‘0‘;
yan_su.style.left = ‘0‘;
var y_style = getStyle(yan_su, ‘display‘); //getStyle()函数库函数，跨浏览器获取元素Style，样式指定属性
if (y_style === "block") {
document.documentElement.style.overflow = ‘hidden‘;
addEvent(window, ‘scroll‘, scrollTop);
} else if (y_style === ‘none‘) {
document.documentElement.style.overflow = ‘auto‘;
}
} else {
alert("遮罩锁屏区块,只能设置一个区块元素，目前jie_dian数组里是多个元素请检查！")
}
return this;
};
/**------------------------------------------------元素事件结束--------------------------------------------**/
/**------------------------------------------------插件入口开始--------------------------------------------**/
/** 插件入口，简单的理解就是通过extend()方法，向此基础库添加一个原型方法
* 此extend()方法，一般是给插件文件使用的，插件就是通过extend()方法，将插件方法添加到基础库原型的
* 接收两个参数
* 参数1是传入要添加的方法名称
* 参数2是此方法的执行函数（包含代码）
**/
feng_zhuang_ku.prototype.extend = function (name, fn) {
feng_zhuang_ku.prototype[name] = fn;
};
/**------------------------------------------------插件入口结束--------------------------------------------**/
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript讲解</title>
<link rel="stylesheet" title=‘xxx‘ type="text/css" href="1.css">
<script type="text/javascript" src="feng_zhuang_ku/han_shu/han_shu.js" charset="utf-8"></script>
<script type="text/javascript" src="feng_zhuang_ku/feng_zhuang_ku.js" charset="utf-8"></script>
<script type="text/javascript" src="feng_zhuang_ku/cha_jian/tuo_zhuai.js" charset="utf-8"></script>
<script type="text/javascript" src="1.js" charset="utf-8"></script>
</head>
<body>
<div id="tou">
<div class="logo"><img src="img/logo.gif" alt=""></div>
<div class="ge_ren_zhong_xin">个人中心
<ul>
<li><a href="#">设置</a></li>
<li><a href="#">换肤</a></li>
<li><a href="#">帮助</a></li>
<li><a href="#">退出</a></li>
</ul>
</div>
<div class="deng_lu">登录</div>
</div>
<div id="login">
<h2 class="tbu"><img src="img/close.png" alt="" class="close" />网站登录</h2>
<div class="user">帐 号：<input type="text" name="user" class="text" /></div>
<div class="pass">密 码：<input type="password" name="pass" class="text" /></div>
<div class="button"><input type="button" class="submit" value="" /></div>
<div class="other">注册新用户 | 忘记密码？</div>
</div>
<div id="suo_ping">1</div>
<input type="button" value="按钮" id="button" />
<a href="http://www.yc60.com" id="a">瓢城Web俱乐部</a>
<div id="box">box</div>
<div id="jkf">
<p>
<span class="a">pspan</span>
<span class="a">pspan</span>
<span class="b">pspan</span>
</p>
<p>
<span class="a">pspan</span>
<span>pspan</span>
<span id="q">pspan</span>
</p>
<div>
<span class="a">pspan</span>
<span>pspan</span>
<span>pspan</span>
</div>
</div>
<p>
<span class="a">pspan</span>
<span class="a">pspan</span>
<span class="b">pspan</span>
</p>
</body>
</html>
css代码
@charset "utf-8";
* {
margin: 0;
padding: 0;
/*color: #ff583d;*/
}
body{
background: url("img/header_bg.png") repeat-x;
font-size:14px;
}
#tou{
width: 900px;
height: 30px;
margin: 0 auto;
}
.logo{
width: 100px;
height: 30px;
float: left;
}
.ge_ren_zhong_xin{
position: relative;
width: 70px;
height: 30px;
line-height: 30px;
float: right;
background: url("img/arrow.png") no-repeat right center;
cursor: pointer;
}
ul{
width: 100px;
height: 110px;
list-style-type: none;
position: absolute;
top:30px;
right: -15px;
background:#FBF7E1;
border:1px solid #999;
border-top:none;
padding:10px 0 0 0;
display:none;
}
ul li {
height:25px;
line-height:25px;
text-indent:20px;
letter-spacing:1px;
}
ul li a {
display:block;
text-decoration:none;
color:#333;
background:url("img/arrow3.gif") no-repeat 5px 45%;
}
ul li a:hover {
background:#fc0 url("img/arrow4.gif") no-repeat 5px 45%;
}
/*登录*/
#tou .deng_lu {
width: 30px;
height: 30px;
float: right;
line-height: 30px;
margin-right: 10px;
cursor: pointer;
}
/*登录框*/
#login{
width: 350px;
height: 250px;
border: 1px solid #ccc;
position:absolute;
display: none;
z-index: 9999;
background-color: #fff;
}
#login h2{
background: rgba(0, 0, 0, 0) url("img/login_header.png") repeat-x scroll 0 0;
border-bottom: 1px solid #ccc;
color: #666;
font-size: 14px;
height: 40px;
line-height : 40px;
text-align: center;
letter-spacing: 1px;
margin: 0 0 20px;
cursor: move;
}
#login h2 img{
cursor: pointer;
float: right;
position: relative;
right: 8px;
top: 14px;
}
#login div.user, #login div.pass {
color: #666;
font-size: 14px;
padding: 5px 0;
text-align: center;
}
#login input.text {
background: #fff none repeat scroll 0 0;
border: 1px solid #ccc;
font-size: 14px;
height: 25px;
width: 200px;
}
#login .button {
padding: 20px 0;
text-align: center;
}
#login input.submit {
background: rgba(0, 0, 0, 0) url("img/login_button.png") no-repeat scroll 0 0;
border: medium none;
cursor: pointer;
height: 30px;
width: 107px;
}
#login .other {
color: #666;
padding: 15px 10px;
text-align: right;
}
/*遮罩锁屏区块*/
#suo_ping{
z-index: 9998; /*注意：如果遮罩层上面有元素，它的层级要大于9998*/
background: #000;
filter: alpha(opacity=50);
opacity: 0.5;
display: none;
}
前台js代码
//前台调用代码
addEvent(window, ‘load‘, function () {
//个人中心和登录框
$(‘#tou .ge_ren_zhong_xin‘).shu_biao_yi_ru_yi_chu(function () { //获取到个人中心元素，执行鼠标移入移除方法
$(this).c_css(‘background‘, ‘url(img/arrow2.png) no-repeat right center‘); //移入鼠标改变人中心背景图片
$(‘.ge_ren_zhong_xin ul‘).xian_shi(); //移入鼠标显示个人中心下拉区块
}, function () {
$(this).c_css(‘background‘, ‘url(img/arrow.png) no-repeat right center‘); //移出鼠标改变人中心背景图片
$(‘.ge_ren_zhong_xin ul‘).yin_cang(); //移出鼠标隐藏个人中心下拉区块
});
$(‘#login .close‘).on_click(function () {
$(‘#login‘).yin_cang();
$(‘#suo_ping‘).yin_cang();
});
$(‘#tou .deng_lu‘).on_click(function () { //获取登录，添加点击事件
$(‘#login‘).xian_shi().yuan_su_ju_zhong().chuang_kou_shi_jian(function () { //点击后，显示登录框，登录框居中，添加窗口事件
$(‘#login‘).yuan_su_ju_zhong(); //窗口改变时再次执行登录框居中
$(‘#suo_ping‘).zhe_zhao_suo_ping()
});
$(‘#suo_ping‘).xian_shi().zhe_zhao_suo_ping();
});
$(‘#login‘).tuo_zhuai(‘tbu‘);
$(‘#jkf p #q‘).c_css(‘font-size‘,‘80px‘).c_css(‘color‘,‘#ff583d‘);
});
时间： 2024-10-06 11:32:58