Jquery创建一个层当鼠标移动到层上面不消失效果,异步文件上传等实用代码

久不出本事类文章,小编都忘了自个儿是一技士啦……明天写一些行事中境遇的东西,我们一块儿学习,反正也相比较浅显了。

复制代码 代码如下:

弹出窗口

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>无标题文书档案</title>
<style type=”text/css”>
#Adiv div {float:left; width:100px;border:1px solid
#333;margin-top:100px;}
#SDiv {width:135px;position: absolute;}
</style>
<script type=”text/javascript”
src=”js/jquery-1.7.2.js”></script>
<script type=”text/javascript”>
$(function(){
var x = -90;
var y = -70;
$(“#Adiv div”).mouseenter(function(e){
this.xx = ($(this).index() + 1) * 100;
this.yy = $(this).offset().top;
var login = $(this).attr(“href”);
if($(“#SDiv”)){$(“#SDiv”).remove();}
var div = “<div id=’SDiv’ style=’border:1px solid #333′><img
src=’images/login_box/box_onmouse.png’ border=’0′ usemap=’#Map’
/><map name=’Map’ id=’Map’><area shape=’rect’ id=’divLogin’
coords=’16,14,67,35′ href=”+login+” /><area shape=’rect’
id=’divRegister’ coords=’75,15,127,37′ href=”
/></map></div>”;
$(“body”).append(div);
$(“#SDiv”).css({ “top”: (this.yy + y) + “px”, “left”: (this.xx + x) +
“px” });
}).mouseleave(function (e) {
var ex = e.pageX;
var ey = e.pageY;
var sx = $(“#SDiv”).offset().top;
var sxx = $(“#SDiv”).offset().top + 72;
var sy = $(“#SDiv”).offset().left;
var syy = $(“#SDiv”).offset().left + 135;
if(ey > sx && ey <= sxx && ex > sy && ex <= syy){
$(“#SDiv”).mouseleave(function(){$(“#SDiv”).remove();});
return false;
}
$(“#SDiv”).remove();
});
})
</script>
</head>


<body>
<!–
<div class=”box_onmouse”><img
src=”images/login_box/box_onmouse.png” border=”0″ usemap=”#Map”
/>
<map name=”Map” id=”Map”>
<area shape=”rect” id=”divLogin” coords=”16,14,67,35″ href=”#”
/>
<area shape=”rect” id=”divRegister” coords=”75,15,127,37″ href=”#”
/>
</map>
</div>
–>
<div id=”Adiv”>
<div href=”11111″>1111111</div>
<div href=”22222″>2222222</div>
<div href=”33333″>3333333</div>
</div>
<div>项目中有这么的必要:鼠标移动到某些div上边时动态创制三个层,那么些层中有2个开关图片(美术事业切换了),种种图片链接分歧地点(链接地址有近来的div提供),鼠标移除那几个层则移除创设的div,若是鼠标移动到这一个创建的div上边则不移除</div>
</body>
</html>

我们在专门的学业中,日常会境遇弹出窗口类应用,偶尔候还亟需一些掩饰层:

代码如下: !DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“” html
xmlns=”…

 图片 1

图片 2

图片 3

那类圆角弹出框其实用得照旧很普遍的,用CSS3能够很轻便的出现,不过思虑到浏览器包容难点,那类依然供给用图形落成了

器重代码如下

复制代码 代码如下:

//弹出层剧中
function popup(popupName) {
var _scrollHeight = $(document).scrollTop();
//获取当前窗口距离页面最上部中度
_windowHeight = $(window).height(); //获取当前窗口中度
_windowWidth = $(window).width(); //获取当前窗口宽度
_popupHeight = popupName.height(); //获取弹出层高度
_popupWeight = popupName.width(); //获取弹出层宽度
// _posiTop = (_windowHeight – _popupHeight) / 2 + _scrollHeight –
50;
_posiTop = _scrollHeight + 120;
_posiLeft = (_windowWidth – _popupWeight) / 2;
popupName.css({ “left”: _posiLeft + “px”, “top”: _posiTop + “px”,
“display”: “block” }); //设置position
}
function dragFunc(dragDiv, dragBody) {
if (dragDiv[0] && dragBody[0]) {
var dragAble = false;
var x1 = 0;
var y1 = 0;
var l = 0;
var t = 0;
var divOffset = dragBody.offset();
dragDiv.mousedown(function (e) {
var ss = this;
// var rootId =
dragDiv.css(“cursor”, “move”);
dragAble = true;
// 当前鼠标距离div边框的距离
// 当前鼠标坐标,减去div相对左边的像素
l = parseInt(dragBody.css(“left”));
t = parseInt(dragBody.css(“top”));
x1 = e.clientX – l;
y1 = e.clientY – t;
x1 = x1 > 0 ? x1 : 0;
y1 = y1 > 0 ? y1 : 0;
this.setCapture && this.setCapture();
});
dragDiv.mousemove(function (e) {
if (!dragAble)
return;
// 当前div侧面的坐标
// 当前鼠标坐标,减去鼠标拖动量
var x2 = 0;
var y2 = 0;
//要求思虑滚动条难点!!!
var top = $(document).scrollTop() ? $(document).scrollTop() – 15 : 0;
var left = $(document).scrollLeft() ? $(document).scrollLeft() – 15 :
0;
x2 = e.clientX – x1 + left;
y2 = e.clientY – y1 + top;
x2 = x2 > 0 ? x2 : 0;
y2 = y2 > 0 ? y2 : 0;
//要运动一定数额才移动
if (Math.abs(l – x2) > 10 || Math.abs(t – y2) > 10) {
dragBody.css(“left”, x2 + “px”);
dragBody.css(“top”, y2 + “px”);
}
});
dragDiv.mouseup(function (event) {
if (!dragAble)
return;
dragAble = false;
// dragDiv.css(“position”, “relative”);
this.releaseCapture && this.releaseCapture();
});
}
}
var MyDialog = function (cfg) {
this.config = {
id: (new Date()).getTime().toString(),
el: null,
bodyId: null,
cover: true,
boxHtm: ‘<div class=”dialog” > ‘ +
‘<table> ‘ +
‘ <tr class=”top”> ‘ +
‘ <td class=”tl”> ‘ +
‘ </td> ‘ +
‘ <td class=”c”> ‘ +
‘ </td> ‘ +
‘ <td class=”tr”> ‘ +
‘ </td> ‘ +
‘ </tr> ‘ +
‘ <tr> ‘ +
‘ <td class=”c”> ‘ +
‘ <div style=”width:10px;”></div>’ +
‘ </td> ‘ +
‘ <td class=”main”> ‘ +
‘ <div class=”title”> ‘ +
‘ <h3> ‘ +
‘ <span class=”title_text”>请输入标题</span> <a
class=”cls” href=”javascript:;”></a> ‘ +
‘ </h3> ‘ +
‘ </div> ‘ +
‘ <div class=”content”> ‘ +
‘ 请输入内容 ‘ +
‘ </div> ‘ +
‘ </td> ‘ +
‘ <td class=”c”> ‘ +
‘ </td> ‘ +
‘ </tr> ‘ +
‘ <tr class=”bottom”> ‘ +
‘ <td class=”bl”> ‘ +
‘ </td> ‘ +
‘ <td class=”c”> ‘ +
‘ <div style=”width:10px;”></div>’ +
‘ </td> ‘ +
‘ <td class=”br”> ‘ +
‘ </td> ‘ +
‘ </tr> ‘ +
‘</table> ‘ +
‘</div>’
};
var scope = this;
if (cfg) {
$.each(cfg, function (key, value) {
scope.config[key] = value;
});
}
this.box = null;
this.cover = null;
this.tmpBody = null;
}
MyDialog.prototype.show = function () {
var scope = this;
var cover = null;
var box = null;
if (this.config.cover) {
if (this.config.id && $(‘#’ + this.config.id + ‘_cover’)[0]) {
cover = $(‘#’ + this.config.id + ‘_cover’);
cover.show();
} else {
cover = $(‘<div style=” display:block; ” id=”‘ + this.config.id +
‘_cover” class=”coverDiv” ></div>’);
$(‘body’).append(cover);
}
scope.cover = cover;
}
if (!$(‘#’ + this.config.id)[0]) {
box = $(this.config.boxHtm);
$(‘body’).append(box);
box.attr(‘id’, this.config.id);
if (this.config.title) {
box.find(‘.title_text’).html(this.config.title);
}
if (this.config.bodyId) {
var body = $(‘#’ + this.config.bodyId);
var tmp = $(‘<div></div>’).append(body);
var initBody = tmp.html();
scope.tmpBody = $(initBody);
tmp = null;
if (body[0]) {
var con = box.find(‘.main .content’);
body.show();
con.html(”);
con.append(body);
}
}
if (this.config.el && this.config.el[0]) {
var con = box.find(‘.main .content’);
con.html(this.config.el);
}
//居中
popup(box);
//关闭dialog
box.find(‘.title .cls’).click(function (e) {
scope.close();
e.preventDefault();
return false;
});
dragFunc($(‘#’ + this.config.id + ‘ .main .title’), $(‘#’ +
this.config.id));
box.show();
this.box = box;
}
}
MyDialog.prototype.close = function () {
//这里有标题
var box = this.box;
var tmpBody = this.tmpBody;
var cover = this.cover;
if (tmpBody && tmpBody[0]) {
$(‘body’).append(tmpBody);
}
if (box && box[0]) {
box.remove();
}
if (cover && cover[0]) {
cover.hide();
}
};

调用方法:

复制代码 代码如下:

var dia = new MyDialog({
title : title,
bodyId : id,
id : id + ‘_box’
});
dia.show();

切切实实大概还亟需自然函数回调,各位能够和煦包裹一番。

拖放


办事中也时常会现出拖放效果的片段需求: