jquery pop弹出层下拉效果实现
2013-09-05 20:23
501 查看
jquery pop弹出层下拉效果实现
注：本文章末提供jquery文件，自己下载一个就可以了。
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link href="/css教程/style.css" type="text/css" rel="stylesheet" />
<link href="/images/icon.ico" rel="shortcut icon" />
<meta http-equiv="x-ua-compatible" content="ie=7.5"/>
<meta http-equiv="x-ua-compatible" content="ie=emulateie7" />
<script charset="utf-8">
/*
* 2011.04.20
* jquery.ku6showtip({centertip:$('#signuplogin_tip')}); 居中显示pop tip
* ********************* close tip
* $(document).trigger('close.ku6showtip')
* */
(function ($) {
$.kshowtip = function (data) {
$.kshowtip.loading(data.centertip);
}
$.extend($.kshowtip, {
settings: {
opacity : '0.2'
},
loading : function (_tarwap) {
showoverlay();
_tarwap.css({
"left": $(window).width() / 2 - 150,
"top" : getpagescroll()[1] + (getpageheight() / 5),
"z-index" : 1000
}).addclass('ku6showtip').show();
$(document).bind('keydown', function (e) {
if (e.keycode == 27) {//esc 关闭
$(document).trigger('close.kshowtip');
}
});
}
});
// getpagescroll() by quirksmode.com
function getpagescroll() {
var xscroll, yscroll;
if (self.pageyoffset) {
yscroll = self.pageyoffset;
xscroll = self.pagexoffset;
} else if (document.documentelement && document.documentelement.scrolltop) { // explorer 6 strict
yscroll = document.documentelement.scrolltop;
xscroll = document.documentelement.scrollleft;
} else if (document.body) {// all other explorers
yscroll = document.body.scrolltop;
xscroll = document.body.scrollleft;
}
return new array(xscroll,yscroll)
}
// adapted from getpagesize() by quirksmode.com
function getpageheight() {
var windowheight
if (self.innerheight) { // all except explorer
windowheight = self.innerheight;
} else if (document.documentelement && document.documentelement.clientheight) { // explorer 6 strict mode
windowheight = document.documentelement.clientheight;
} else if (document.body) { // other explorers
windowheight = document.body.clientheight;
}
return windowheight
}
/*
* show overlayer
* */
function showoverlay () {
$('body').append('<div id="face_overlay"></div>');
$('#face_overlay').hide().addclass('face_overlaybg')
.css({opacity:$.kshowtip.settings.opacity, height:document.body.clientheight})
.click(function () {
$(document).trigger('close.kshowtip');
}).fadein(200);
}
/*
* hide overlayer and remove face_overlaybg
* */
function hideoverlay () {
$this = $('.ku6showtip');
$this.fadeout(200, function () {
$('#face_overlay').remove();
});
}
/*
* binding
* */
$(document).bind('close.kshowtip', function () {
$(document).unbind('keydown');
hideoverlay();
});
})(jquery);
/*
* pull down
* 数组模式，dataarray下标是要显示元素的id名称例如: <div id="xiala1"></div>
* ************************************************************************ pulldown 当前是默认状态
* var dataarray = [];
* dataarray['xiala1'] = new array(
* ['啦啦1', 'xx1.html'],
* ['啦啦2', 'xx2.html']
* );
* $('div[rel=ku6pulldown]').ku6pulldown({_dataarray:dataarray}); //调用方法
* ************************************************************************ solely 单个div
* var solelyarray = [];
* solelyarray = new array(
* ['啦啦111', 'xx111.html'],
* ['啦啦222', 'xx222.html']
* );
* $('div[rel=ku6pulldown1]').kpulldown({_datalist:solelyarray, type:'solely', _pulldownelement:'kpulldown_right'});
* */
(function ($) {
$.fn.kpulldown = function (options) {
if ($(this).length == 0) return false;
var defaults = {
_pulldownelement:'kpulldown_sub',//默认下拉子元素
_datalist:[],
type:'pulldown' // pulldown 默认导航下拉模式 ，solely独立一个div模式
}
var s = $.extend({}, defaults, options || {});
function mousehandler () {
that = $(this);
var _subele = {};
switch (s.type) {
case 'pulldown'://默认导航菜单模式
_subele = selecttype_pulldown();
break;
case 'solely'://独立元素 一个box div
_subele = selecttype_solely();
break;
}
_subele.bind('mouseenter', function () {
}).bind('mouseleave', function () {
$(document).trigger('close.kpulldown');
}).show();
$(document).bind('click.kpulldown', function () {
$(document).trigger('close.kpulldown');
})
}
//处理 datalist, 将数组数据生成html
function datalist (_data) {
if (typeof(_data) != 'object') return false;
var ischeck;
switch (s.type) {
case 'pulldown':
ischeck = that.children().is('.' + s._pulldownelement);
break;
case 'solely':
if ($('.' + s._pulldownelement).length >=1) ischeck = true;
break;
}
if (!ischeck){
var html = '';
$.each(_data, function (k, v) {
html += ["<li><a href='",v[1],"'>",v[0],"</a></li> n"].join('');
});
return ["<div class='"+ s._pulldownelement +"'><ul>",html,"</ul></div>"].join("");
}
}
//选择显示类型
function selecttype_pulldown () { // type: pulldown
$(document).trigger('close.kpulldown');
that.append(datalist(s._datalist[that.attr('id')]));
var _subele = that.children('.' + s._pulldownelement);
return _subele;
}
function selecttype_solely () {
$(document).trigger('close.kpulldown');
$('body').append(datalist(s._datalist));
var _subele = $('.' + s._pulldownelement);
_subele.css({left:that.offset().left - that.width() - 11, top:that.offset().top});
return _subele;
}
//click document remove element
function removeele() {
switch (s.type) {
case 'pulldown':
$('.' + s._pulldownelement).hide();
break;
case 'solely':
$('.' + s._pulldownelement).remove();
break;
}
}
$(document).bind('close.kpulldown', function () {
$(document).unbind('click.kpulldown')
removeele();
})
return this.bind("mouseo教程ver", mousehandler);
}
})(jquery)
</script>
<style>
body {position:relative}
.face_overlaybg {
background-color: #000;
z-index: 99;
}
#face_overlay {
position: fixed;
_position: absolute;/*ie6 hack*/
top: 0px;
left: 0px;
height:100%;
width:100%;
}
.kpulldown_sub, .kpulldown_right {
position:absolute;
top:0px;
right:50px;
width:60px;
border:1px solid #000;
display:none;
}
</style>
</head>
<body>
<div id="box" style="width:1004px;height:2000px; border:1px solid #000">
<div id="open" style="width:100px;height:100px;border:1px solid #000">弹出</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div rel="ku6pulldown" id="xiala1" style="width:50px;height:50px;border:1px solid #000;position:relative;margin-left:300px;">下拉
</div>
<div rel="ku6pulldown" id="xiala2" style="width:50px;height:50px;border:1px solid #000;position:relative;margin-left:300px;">下拉q1
</div>
<div rel="ku6pulldown1" id="xiala3" style="width:50px;height:50px;border:1px solid #000;position:relative;margin-left:300px;">下拉q2
</div>
<div rel="ku6pulldown1" id="xiala4" style="width:50px;height:50px;border:1px solid #000;position:relative;margin-left:300px;">下拉q3</div>
<div rel="ku6pulldown1" id="xiala5" style="width:50px;height:50px;border:1px solid #000;position:relative;margin-left:300px;">下拉q4</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/></div>
<div id="signuplogin_tip" class="poptip poptip287x190" style="display:none">
<div class="tiptopwap clearfix">
<a class="close"> </a>
</div>
<span class="inputwap inputwap2">
<label>
账 号：
</label>
<input id="username" tabindex='1' /></span><span class="inputwap inputwap2">
<label>
密 码：
</label>
<input tabindex='2' type="password" id="password" /></span><span class="inputwap inputwap3"><a class="login" tabindex='3'>登 录</a><a class="forgetpw" href="/getback_password.html" target="_blank" tabindex='4'>忘记密码？</a></span>
<div class="tri_area tri_area_signup">
<a class="newsignup" href="/register.html" target="_blank" style="_background: #ffaa0e;">新用户注册</a>
</div>
</div>
<script charset="utf-8" src="j.ku6tip.js" type="text/网页特效"></script>
<script>
jquery(document).ready(function () {
$("div.poptip a.close").bind("click", function(event){
$(document).trigger('close.kshowtip')
});
$('#open').bind('click', function () {
$.kshowtip({centertip:$('#signuplogin_tip')});
});
var dataarray = [];
dataarray['xiala1'] = new array(
['啦啦1', 'xx1.html'],
['啦啦2', 'xx2.html']
);
dataarray['xiala2'] = new array(
['啦啦11', 'xx11.html'],
['啦啦22', 'xx22.html']
);
var solelyarray = [];
solelyarray = new array(
['啦啦111', 'xx111.html'],
['啦啦222', 'xx222.html']
);
$('div[rel=ku6pulldown1]').kpulldown({_datalist:solelyarray, type:'solely', _pulldownelement:'kpulldown_right'});
$('div[rel=ku6pulldown]').kpulldown({_datalist:dataarray});
});
</script>
</body>
</html>
注：本文章末提供jquery文件，自己下载一个就可以了。
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link href="/css教程/style.css" type="text/css" rel="stylesheet" />
<link href="/images/icon.ico" rel="shortcut icon" />
<meta http-equiv="x-ua-compatible" content="ie=7.5"/>
<meta http-equiv="x-ua-compatible" content="ie=emulateie7" />
<script charset="utf-8">
/*
* 2011.04.20
* jquery.ku6showtip({centertip:$('#signuplogin_tip')}); 居中显示pop tip
* ********************* close tip
* $(document).trigger('close.ku6showtip')
* */
(function ($) {
$.kshowtip = function (data) {
$.kshowtip.loading(data.centertip);
}
$.extend($.kshowtip, {
settings: {
opacity : '0.2'
},
loading : function (_tarwap) {
showoverlay();
_tarwap.css({
"left": $(window).width() / 2 - 150,
"top" : getpagescroll()[1] + (getpageheight() / 5),
"z-index" : 1000
}).addclass('ku6showtip').show();
$(document).bind('keydown', function (e) {
if (e.keycode == 27) {//esc 关闭
$(document).trigger('close.kshowtip');
}
});
}
});
// getpagescroll() by quirksmode.com
function getpagescroll() {
var xscroll, yscroll;
if (self.pageyoffset) {
yscroll = self.pageyoffset;
xscroll = self.pagexoffset;
} else if (document.documentelement && document.documentelement.scrolltop) { // explorer 6 strict
yscroll = document.documentelement.scrolltop;
xscroll = document.documentelement.scrollleft;
} else if (document.body) {// all other explorers
yscroll = document.body.scrolltop;
xscroll = document.body.scrollleft;
}
return new array(xscroll,yscroll)
}
// adapted from getpagesize() by quirksmode.com
function getpageheight() {
var windowheight
if (self.innerheight) { // all except explorer
windowheight = self.innerheight;
} else if (document.documentelement && document.documentelement.clientheight) { // explorer 6 strict mode
windowheight = document.documentelement.clientheight;
} else if (document.body) { // other explorers
windowheight = document.body.clientheight;
}
return windowheight
}
/*
* show overlayer
* */
function showoverlay () {
$('body').append('<div id="face_overlay"></div>');
$('#face_overlay').hide().addclass('face_overlaybg')
.css({opacity:$.kshowtip.settings.opacity, height:document.body.clientheight})
.click(function () {
$(document).trigger('close.kshowtip');
}).fadein(200);
}
/*
* hide overlayer and remove face_overlaybg
* */
function hideoverlay () {
$this = $('.ku6showtip');
$this.fadeout(200, function () {
$('#face_overlay').remove();
});
}
/*
* binding
* */
$(document).bind('close.kshowtip', function () {
$(document).unbind('keydown');
hideoverlay();
});
})(jquery);
/*
* pull down
* 数组模式，dataarray下标是要显示元素的id名称例如: <div id="xiala1"></div>
* ************************************************************************ pulldown 当前是默认状态
* var dataarray = [];
* dataarray['xiala1'] = new array(
* ['啦啦1', 'xx1.html'],
* ['啦啦2', 'xx2.html']
* );
* $('div[rel=ku6pulldown]').ku6pulldown({_dataarray:dataarray}); //调用方法
* ************************************************************************ solely 单个div
* var solelyarray = [];
* solelyarray = new array(
* ['啦啦111', 'xx111.html'],
* ['啦啦222', 'xx222.html']
* );
* $('div[rel=ku6pulldown1]').kpulldown({_datalist:solelyarray, type:'solely', _pulldownelement:'kpulldown_right'});
* */
(function ($) {
$.fn.kpulldown = function (options) {
if ($(this).length == 0) return false;
var defaults = {
_pulldownelement:'kpulldown_sub',//默认下拉子元素
_datalist:[],
type:'pulldown' // pulldown 默认导航下拉模式 ，solely独立一个div模式
}
var s = $.extend({}, defaults, options || {});
function mousehandler () {
that = $(this);
var _subele = {};
switch (s.type) {
case 'pulldown'://默认导航菜单模式
_subele = selecttype_pulldown();
break;
case 'solely'://独立元素 一个box div
_subele = selecttype_solely();
break;
}
_subele.bind('mouseenter', function () {
}).bind('mouseleave', function () {
$(document).trigger('close.kpulldown');
}).show();
$(document).bind('click.kpulldown', function () {
$(document).trigger('close.kpulldown');
})
}
//处理 datalist, 将数组数据生成html
function datalist (_data) {
if (typeof(_data) != 'object') return false;
var ischeck;
switch (s.type) {
case 'pulldown':
ischeck = that.children().is('.' + s._pulldownelement);
break;
case 'solely':
if ($('.' + s._pulldownelement).length >=1) ischeck = true;
break;
}
if (!ischeck){
var html = '';
$.each(_data, function (k, v) {
html += ["<li><a href='",v[1],"'>",v[0],"</a></li> n"].join('');
});
return ["<div class='"+ s._pulldownelement +"'><ul>",html,"</ul></div>"].join("");
}
}
//选择显示类型
function selecttype_pulldown () { // type: pulldown
$(document).trigger('close.kpulldown');
that.append(datalist(s._datalist[that.attr('id')]));
var _subele = that.children('.' + s._pulldownelement);
return _subele;
}
function selecttype_solely () {
$(document).trigger('close.kpulldown');
$('body').append(datalist(s._datalist));
var _subele = $('.' + s._pulldownelement);
_subele.css({left:that.offset().left - that.width() - 11, top:that.offset().top});
return _subele;
}
//click document remove element
function removeele() {
switch (s.type) {
case 'pulldown':
$('.' + s._pulldownelement).hide();
break;
case 'solely':
$('.' + s._pulldownelement).remove();
break;
}
}
$(document).bind('close.kpulldown', function () {
$(document).unbind('click.kpulldown')
removeele();
})
return this.bind("mouseo教程ver", mousehandler);
}
})(jquery)
</script>
<style>
body {position:relative}
.face_overlaybg {
background-color: #000;
z-index: 99;
}
#face_overlay {
position: fixed;
_position: absolute;/*ie6 hack*/
top: 0px;
left: 0px;
height:100%;
width:100%;
}
.kpulldown_sub, .kpulldown_right {
position:absolute;
top:0px;
right:50px;
width:60px;
border:1px solid #000;
display:none;
}
</style>
</head>
<body>
<div id="box" style="width:1004px;height:2000px; border:1px solid #000">
<div id="open" style="width:100px;height:100px;border:1px solid #000">弹出</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div rel="ku6pulldown" id="xiala1" style="width:50px;height:50px;border:1px solid #000;position:relative;margin-left:300px;">下拉
</div>
<div rel="ku6pulldown" id="xiala2" style="width:50px;height:50px;border:1px solid #000;position:relative;margin-left:300px;">下拉q1
</div>
<div rel="ku6pulldown1" id="xiala3" style="width:50px;height:50px;border:1px solid #000;position:relative;margin-left:300px;">下拉q2
</div>
<div rel="ku6pulldown1" id="xiala4" style="width:50px;height:50px;border:1px solid #000;position:relative;margin-left:300px;">下拉q3</div>
<div rel="ku6pulldown1" id="xiala5" style="width:50px;height:50px;border:1px solid #000;position:relative;margin-left:300px;">下拉q4</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/></div>
<div id="signuplogin_tip" class="poptip poptip287x190" style="display:none">
<div class="tiptopwap clearfix">
<a class="close"> </a>
</div>
<span class="inputwap inputwap2">
<label>
账 号：
</label>
<input id="username" tabindex='1' /></span><span class="inputwap inputwap2">
<label>
密 码：
</label>
<input tabindex='2' type="password" id="password" /></span><span class="inputwap inputwap3"><a class="login" tabindex='3'>登 录</a><a class="forgetpw" href="/getback_password.html" target="_blank" tabindex='4'>忘记密码？</a></span>
<div class="tri_area tri_area_signup">
<a class="newsignup" href="/register.html" target="_blank" style="_background: #ffaa0e;">新用户注册</a>
</div>
</div>
<script charset="utf-8" src="j.ku6tip.js" type="text/网页特效"></script>
<script>
jquery(document).ready(function () {
$("div.poptip a.close").bind("click", function(event){
$(document).trigger('close.kshowtip')
});
$('#open').bind('click', function () {
$.kshowtip({centertip:$('#signuplogin_tip')});
});
var dataarray = [];
dataarray['xiala1'] = new array(
['啦啦1', 'xx1.html'],
['啦啦2', 'xx2.html']
);
dataarray['xiala2'] = new array(
['啦啦11', 'xx11.html'],
['啦啦22', 'xx22.html']
);
var solelyarray = [];
solelyarray = new array(
['啦啦111', 'xx111.html'],
['啦啦222', 'xx222.html']
);
$('div[rel=ku6pulldown1]').kpulldown({_datalist:solelyarray, type:'solely', _pulldownelement:'kpulldown_right'});
$('div[rel=ku6pulldown]').kpulldown({_datalist:dataarray});
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery实现可自动判断位置的弹出层效果代码
- [原创+源码]jQuery实现弹出居、右下角、左下角窗口效果（二）
- jQuery实现鼠标经过弹出提示信息的地图热点效果
- jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
- jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
- jQuery基于事件控制实现点击显示内容下拉效果
- jQuery弹出下拉列表插件（实现kindeditor的@功能）
- jQuery实现的AJAX简单弹出层效果代码
- Jquery实现弹出层效果
- jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
- jQuery实现模仿微博下拉滚动条加载数据效果
- jquery实现弹出窗口效果
- jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
- jQuery实现的向上弹出的仿flash效果的导航菜单
- 实现jquery simplemodal弹出框可拖拽效果
- jQuery实现气球弹出框式的侧边导航菜单效果
- jquery弹出下拉列表插件（实现kindeditor的@功能）
- jquery实现模拟select下拉框效果