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>