以下是 jQuery鼠标双击图片加入小框代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>jQuery鼠标双击图片加入小框代码</title>
<link href="css/UserStyle.css" rel="stylesheet" />
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
ImgListMouseDownEvent();//注册鼠标在图片上的事件(按下事件和双击事件)
SortListMouseDownEvent();//注册鼠标在排序后图片上的事件(按下事件和双击事件)
WindowMouseMoveAndUp();//注册windows事件（鼠标移动和松开事件）
});
//禁止拖动
document.ondragstart = function () { return false };
//禁用文本选择功能
var omitformtags = ["input", "textarea", "select"]
omitformtags = omitformtags.join("|")
function disableselect(e) {
if (omitformtags.indexOf(e.target.tagName.toLowerCase()) == -1)
return false
}
function reEnable() {
return true
}
if (typeof document.onselectstart != "undefined")
document.onselectstart = new Function("return false")
else {
document.onmousedown = disableselect
document.onmouseup = reEnable
}
//禁用右键
$(document).ready(function () {
$(document).bind("contextmenu", function (e) {
//return false;
});
});
//注册鼠标在图片上的事件(按下事件和双击事件)
function ImgListMouseDownEvent() {
$(".imgList > li").unbind("mousedown").unbind("dblclick");//为图片绑定(注册)鼠标按下事件和鼠标双击事件
$(".imgList > li[allow]").mousedown(function (event) {
$(document.body).data("_isimgdown_", true); //标示是否为鼠标在图片上的按下事件
$(document.body).data("_eventx_", event.pageX); //鼠标在图片上按下事件时鼠标的x坐标值
$(document.body).data("_eventy_", event.pageY); //鼠标在图片上按下事件时鼠标的y坐标值
$(document.body).data("_li_", $(this)); //鼠标在图片上按下事件时当前的li元素
$(document.body).data("_imgtop_", (event.pageY - $(this).offset().top) * 0.26);
$(document.body).data("_imgleft_", (event.pageX - $(this).offset().left) * 0.38);
//var _li_ = $(document.body).data("_li_");
//alert("x:" + $(document.body).data("_eventx_") + " y:" + $(document.body).data("_eventy_") + " li-img:" + $("img", _li_).attr("src") + " li-div:" + $("div", _li_).html());
}).dblclick(function (event) {
$(".imgList > li").unbind("mousedown").unbind("dblclick");//为图片绑定(注册)鼠标按下事件和鼠标双击事件
$(".sortList > li").unbind("mousedown").unbind("dblclick");//为已选图片绑定(注册)鼠标按下事件和鼠标双击事件
var _this_ = $(this);//鼠标在图片上双击事件时当前的li元素
var _img_ = $("img", _this_);//鼠标在图片上双击事件时当前的图片元素
var _div_ = $("div", _this_);//鼠标在图片上双击事件时当前的div元素
//alert(_div_.html()+" "+_img_.attr("src") );
var targetLi; //定义目标
//alert(targetLi);
//循环目标的li元素
$(".sortList > li").each(function (i, e) {
if ($("img", $(this)).length == 0 && (!$(this).attr("allow") || $(this).attr("allow") == false)) {
targetLi = $(this); //目标为符合条件的当前li元素
return false;
}
});
//alert($("div",targetLi).attr("class"));
if (targetLi) { //目标li存在
var targetLeft = targetLi.offset().left;
var targetTop = targetLi.offset().top;
_this_.removeAttr("allow").addClass("image_shadow"); //排序前的当前li元素移除allow属性 添加样式：image_shadow
targetLi.attr("allow", true);//排序后的目标元素添加属性allow为true
var _dropDivID_ = "_divDrop_" + _this_.attr("id").replace("_s_", ""); //动画层id
$("<div class='DropDiv' style='display:none;' id='" + _dropDivID_ + "'></div>").appendTo($(document.body)); //创建动画层
$("#" + _dropDivID_).html(_div_.html())
.css({ top: event.pageY - (event.pageY - $(this).offset().top) * 0.26, left: event.pageX - (event.pageX - $(this).offset().left) * 0.38 })
.height(50)
.width(86)
.fadeIn(100, function () {
$(this).animate({ top: targetTop - 2, left: targetLeft + 2 }, 500, "linear", function () {
$(this).fadeOut(100, function () {
$(this).remove();
//生成图片和文字
targetLi.empty()
.html("<div style='display:none;'>" + _div_.html() + "</div>" + "<img width=86 height=50 style='display:none;' src=" + _img_.attr("src") + " />")
.removeAttr("id")
.attr("id", "_s_" + _this_.attr("id").replace("_s_", ""));
//图片效果
$("img", targetLi).show();
});
});
});
//alert("left:" + targetLeft + " top:" + targetTop);
ImgListMouseDownEvent();//重新注册鼠标在图片上的事件(按下事件和双击事件)
SortListMouseDownEvent();//重新注册鼠标在排序后图片上的事件(按下事件和双击事件)
}
})
}
//注册鼠标在排序后图片上的事件(按下事件和双击事件)
function SortListMouseDownEvent() {
$(".sortList li").unbind("mousedown").unbind("dblclick").unbind("mouseover").unbind("mouseout");
$(".sortList li[allow=true]").mousedown(function (event) {
$(document.body).data("_issortdown_", true);
$(document.body).data("_eventx_", event.pageX);
$(document.body).data("_eventy_", event.pageY);
$(document.body).data("_li_", $(this));
$(document.body).data("_imgtop_", (event.pageY - $(this).offset().top));
$(document.body).data("_imgleft_", (event.pageX - $(this).offset().left));
}).dblclick(function (event) {
//debugger;
$(".imgList > li").unbind("mousedown").unbind("dblclick");
$(".sortList li").unbind("mousedown").unbind("dblclick");
var _this_ = $(this);//鼠标在排序后图片上双击事件时当前的li元素
var _img_ = $("img", _this_);//鼠标在排序后图片上双击事件时当前的图片元素
var _div_ = $("div", _this_);//鼠标在排序后图片上双击事件时当前的div元素
var targetLi = $("#" + _this_.attr("id").replace("_s_", ""));//得到目标元素（为鼠标在排序前图片上双击事件时当初的li元素）
var _dropDivID_ = "_divDrop_" + _this_.attr("id").replace("_s_", ""); //动画层id
$("<div class='DropDiv' style='display:none;' id='" + _dropDivID_ + "'></div>").appendTo($(document.body));//创建动画层
targetLi.attr("allow", true);//排序前的原元素添加属性allow为true
_this_.removeAttr("allow");//排序后的当前li元素移除allow属性
$("#" + _dropDivID_).html(_div_.html())
.css({ top: _this_.offset().top - 2, left: _this_.offset().left + 2 })
.height(50)
.width(86)
.fadeIn(100, function () {
$(this).animate({ top: targetLi.offset().top + (targetLi.height() * 0.5) / 2, left: targetLi.offset().left + (targetLi.width() * 0.5) / 2 }, 500, "linear", function () {
$(this).remove();
_this_.empty().removeAttr("id");
targetLi.removeClass("image_shadow");
addNoImgLiCss(); //添加无图片样式 addNoImgLiCss
});
});
ImgListMouseDownEvent();//重新注册鼠标在图片上的事件(按下事件和双击事件)
SortListMouseDownEvent();//重新注册鼠标在排序后图片上的事件(按下事件和双击事件)
}).mouseover(function () {
var _this_ = $(this);
$("img", _this_).hide();
$("div", _this_).show().addClass("selli");
}).mouseout(function () {
var _this_ = $(this);
$("div", _this_).hide().removeClass("selli");
$("img", _this_).show();
});
}
//#region 添加无图片样式 addNoImgLiCss
function addNoImgLiCss() {
var index = 1;
$('li', $(".sortList")).each(function () {
if ($("img", this).length == 0) {
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
$(this).html("<span>" + index + "</span>");
}
else {
$(this).html("<div class='sortListBg Bg" + index + "'></div>");
}
}
index++;
});
}
//#endregion
//#region 获取排序后li的位置数组
function getSortPositionArrayList() {
var arraylist = new Array();
$("li", $(".sortList")).each(function (i) {
var array = new Array();
array[0] = $(this).offset().left;
array[1] = $(this).offset().left + $(this).width();
array[2] = $(this).offset().top;
array[3] = $(this).offset().top + $(this).height();
arraylist[i] = array;
});
return arraylist;
}
//#endregion
//#region 获取拖动位置 getPosition
function getPosition(pageX, pageY) {
var arraylist = getSortPositionArrayList();//获取排序后li的位置数组
for (var i = 0; i < arraylist.length; i++) { //循环排序后li的位置数组
if (pageX >= arraylist[i][0] && pageX <= arraylist[i][1] && pageY >= arraylist[i][2] && pageY <= arraylist[i][3]) {
return i; //如果鼠标的坐标位置处于排序后li的位置数组之间则返回排序后当前的li的索引
}
}
return -1;
}
//#endregion
//#region 注册windows事件（鼠标移动和松开事件）
function WindowMouseMoveAndUp() {
$(document).mousemove(function (event) {
ImgDragEvent(event);//鼠标在排序前图片上按下后的拖拽事件
SortDragEvent(event);//鼠标在排序后图片上按下后的拖拽事件
}).mouseup(function (event) {
var position = getPosition(event.pageX, event.pageY);
if ($(document.body).data("_isimgdown_")) { //鼠标是在排序前图片上按下时
ImgMouseUpEvent(position);//鼠标在图片上的松开事件
}
if ($(document.body).data("_issortdown_")) {//鼠标是在排序后图片上按下时
SortMouseUpEvent(position);//鼠标在排序后图片上的松开事件
}
});
}
//#endregion
//#region 注册鼠标在排序前图片上按下后的拖拽事件
function ImgDragEvent(event) {
//排序前图片拖拽
if ($(document.body).data("_isimgdown_")) {
var _eventx_ = $(document.body).data("_eventx_");
var _eventy_ = $(document.body).data("_eventy_");
var _li_ = $(document.body).data("_li_");
//整体移动 >5 相素时移动
if (Math.abs(event.pageX - _eventx_) + Math.abs(event.pageY - _eventy_) >= 5) {
var _divHtml_ = $("div", _li_).html();
$("#DropDiv").html(_divHtml_)
.css({ top: event.pageY - $(document.body).data("_imgtop_"), left: event.pageX - $(document.body).data("_imgleft_") })
.height(50)
.width(86)
.show();
}
}
}
//#endregion
//#region 注册鼠标在排序后图片上按下后的拖拽事件
function SortDragEvent(event) {
//排序后图片拖拽
if ($(document.body).data("_issortdown_")) {
var _eventx_ = $(document.body).data("_eventx_");
var _eventy_ = $(document.body).data("_eventy_");
var _li_ = $(document.body).data("_li_");
//整体移动 >5 相素时移动
if (Math.abs(event.pageX - _eventx_) + Math.abs(event.pageY - _eventy_) >= 5) {
var imgsrc = $("img", _li_).length > 0 ? $("img", _li_).attr("src") : "Aspx_Page/images/white.png";
var _divHtml_ = $("div", _li_).html()
$("#DropDiv").html(_divHtml_)
.css({ top: event.pageY - $(document.body).data("_imgtop_"), left: event.pageX - $(document.body).data("_imgleft_") })
.height(50)
.width(86)
.show();
}
}
}
//#endregion
//#region 注册图片mouseup事件 registerImgMouseUpEvent
function ImgMouseUpEvent(position) {
//当前拖拽的图片对象
var _li_ = $(document.body).data("_li_");
var _img_ = $("img", _li_);
var _divHtml_ = $("div", _li_);
//当前拖拽位置
if (position != -1) {
//拖在已存在图片上
if ($("img", $(".sortList > li:eq(" + position + ")")).length > 0) {
var existsid = $(".sortList > li:eq(" + position + ")").attr("id");
$("#" + existsid.replace("_s_", "")).attr("allow", true).removeClass("image_shadow");
/*
var nextLi;
$(".sortList > li:gt(" + position + ")").each(function () {
if (!$(this).attr("allow") || $(this).attr("allow") == false) {
nextLi = $(this);
return false;
}
});
var existsid = $(".sortList > li:eq(" + position + ")").attr("id");
if (nextLi != undefined) {
nextLi.html($("#_s_" + existsid.replace("_s_", "")).html())
.insertAfter($(".sortList > li:eq(" + position + ")"))
.attr("allow", true)
.removeClass("image_shadow")
.attr("id", "_s_" + existsid.replace("_s_", ""))
}
else {
$("#" + existsid.replace("_s_", "")).attr("allow", true).removeClass("image_shadow");
}
*/
}
//生成图片和文字
$("li:eq(" + position + ")", $(".sortList"))
.empty()
.html("<div style='display:none;'>" + _divHtml_.html() + "</div>" + "<img width=86 height=50 style='display:none;' src=" + _img_.attr("src") + " />")
.removeAttr("id")
.attr("id", "_s_" + _li_.attr("id").replace("_s_", ""))
.attr("allow", true);
//图片效果
$("img", $("#_s_" + _li_.attr("id").replace("_s_", ""))).show();
//移除可拖拽属性
_li_.removeAttr("allow").addClass("image_shadow");
//注册事件
ImgListMouseDownEvent();//注册鼠标在图片上的事件(按下事件和双击事件)
SortListMouseDownEvent();//注册鼠标在排序后图片上的事件(按下事件和双击事件)
}
//移除img的mousedown
$(document.body).removeData("_isimgdown_");
//隐藏拖拽层
$("#DropDiv").empty().hide();
}
//#endregion
//#region 注册ULmouseup事件 registerUlMouseUpEvent
function SortMouseUpEvent(position) {
//debugger;
//当前拖拽li对象
var _li_ = $(document.body).data("_li_");
//当前拖拽位置
if (position != -1) {
//debugger;
//拖在已存在图片上
if ($("img", $("ul.sortList > li:eq(" + position + ")")).length > 0) {
var existsid = $("ul.sortList > li:eq(" + position + ")").attr("id");
$("#" + existsid.replace("_s_", "")).attr("allow", true).removeClass("image_shadow");
}
//在新位置添加元素
$("ul.sortList > li:eq(" + position + ")")
.empty()
.attr("allow", true)
.attr("id", _li_.attr("id"))
.html(_li_.html());
//移除原位置元素
$("ul.sortList > li:eq(" + _li_.index() + ")")
.removeAttr("id")
.removeAttr("allow")
.html('<div class="sortListBg Bg"' + (_li_.index() + 1));
/*
//向后拖动
if (_li_.index() > position) {
$("img", _li_).hide();
$(_li_).insertBefore($(".sortList > li:eq(" + position + ")"));
// $("img", _li_).fadeIn(100, function () {
// $(this).fadeOut(100, function () {
// $(this).fadeIn(100);
// });
// })
}
//向前拖动
if (_li_.index() < position) {
$("img", _li_).hide();
$(_li_).insertAfter($(".sortList > li:eq(" + position + ")"));
// $("img", _li_).fadeIn(100, function () {
// $(this).fadeOut(100, function () {
// $(this).fadeIn(100);
// });
// })
}
*/
}
else {
$("#" + _li_.attr("id").replace("_s_", ""))
.attr("allow", true)
.removeClass("image_shadow");
_li_.empty().removeAttr("allow").removeAttr("id");
}
//注册事件
ImgListMouseDownEvent();//注册鼠标在图片上的事件(按下事件和双击事件)
SortListMouseDownEvent();//注册鼠标在排序后图片上的事件(按下事件和双击事件)
//添加无图片的li样式
addNoImgLiCss();
//移除ul的mousedown
$(document.body).removeData("_issortdown_");
//隐藏拖拽层
$("#DropDiv").empty().hide();
}
//#endregion
</script>
</head>
<body style="width: 100%; overflow-x: hidden;">
<h3>双击或拖动图片查看效果</h3>
<div class="contentmiddle">
<div class="contentimg">
<ul class="imgList">
<li allow="true" id="599029">
<img src="UpFiles/Img_Option/a1.png" style="width: 230px; height: 140px;" /><div>Picture information 1</div>
</li>
<li allow="true" id="599030">
<img src="UpFiles/Img_Option/a2.png" style="width: 230px; height: 140px;"><div>Picture information 2</div>
</li>
<li allow="true" id="599031">
<img src="UpFiles/Img_Option/a3.png" style="width: 230px; height: 140px;"><div>Picture information 3</div>
</li>
<li allow="true" id="599032">
<img src="UpFiles/Img_Option/a4.png" style="width: 230px; height: 140px;"><div>Picture information 4</div>
</li>
<li allow="true" id="599033">
<img src="UpFiles/Img_Option/a5.png" style="width: 230px; height: 140px;"><div>Picture information 5</div>
</li>
<li allow="true" id="599034">
<img src="UpFiles/Img_Option/a6.png" style="width: 230px; height: 140px;"><div>Picture information 6</div>
</li>
</ul>
</div>
<div class="clear"></div>
<ul class="sortList">
<li>
<div class="sortListBg Bg1"></div>
</li>
<li>
<div class="sortListBg Bg2"></div>
</li>
<li>
<div class="sortListBg Bg3"></div>
</li>
<li>
<div class="sortListBg Bg4"></div>
</li>
<li>
<div class="sortListBg Bg5"></div>
</li>
<li>
<div class="sortListBg Bg6"></div>
</li>
</ul>
</div>
</body>
</html>
CSS代码(UserStyle.css):
@charset "utf-8";body,html{margin:0;padding:0;font-size:12px;font-family:微软雅黑;background-color:#ececec;width:100%;height:100%;}
h3{text-align:center;}
.contentmiddle{width:780px;margin:40px auto;}
.imgList{float:left;list-style:none;padding:0px;margin:0px;width:780px;}
.imgList li{width:260px;float:left;cursor:pointer;padding:0px;margin:0px;border:0px solid #000000;text-align:center;}
.imgList li img{width:100%;height:100%;}
.imgList li.active{background:#f75d88;border:1px solid red;}
.imgList li div{margin-top:-4px;margin-top:0px\9;color:#ffffff;font-weight:bold;height:45px;border:0px yellow solid;/* filter:alpha(opacity=50);-moz-opacity:0.8;width:auto !important;*/
width:230px;padding-top:5px;margin-left:15px;*margin-left:0px;_margin-left:0px;background:url("../img/bg_topic.jpg");background-repeat:repeat-x;line-height:28px;font-size:14px;_font-size:12px;}
@media screen and (-webkit-min-device-pixel-ratio:0){.imgList li div{margin-top:0px;}
}
.sortList{list-style:none;padding:0px;margin:0 auto;border:0px solid red;height:70px;width:680px;}
.sortList li{text-align:center;float:left;cursor:pointer;background:#FFF;border:1px dashed #D5D5D5;width:95px;height:54px;margin:0px 0px 0px 12px;_margin:0px 0px 0px 10px;padding:0px;padding-top:4px;}
.sortList li span{font-size:20px;font-weight:bold;float:left;margin:10px 0px 0px 42px;}
.sortListBg{margin-top:30px;width:30px;height:30px;margin:0 auto;margin-top:10px;}
.Bg1{background-image:url(../img/bg_01.png);background-repeat:no-repeat;}
.Bg2{background-image:url(../img/bg_02.png);background-repeat:no-repeat;}
.Bg3{background-image:url(../img/bg_03.png);background-repeat:no-repeat;}
.Bg4{background-image:url(../img/bg_04.png);background-repeat:no-repeat;}
.Bg5{background-image:url(../img/bg_05.png);background-repeat:no-repeat;}
.Bg6{background-image:url(../img/bg_06.png);background-repeat:no-repeat;}
.clear{clear:both;}
.image_shadow{filter:Chroma(Color="#FFFFFF");filter:alpha( Color="#FFFFFF",opacity=20);filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity:0.2;opacity:0.2;}
.selli{background-repeat:no-repeat;color:White;font-family:'Microsoft YaHei';margin:-1px 0px 0px 4px;text-align:center;cursor:pointer;background:#000;border:1px dashed #EEE;width:86px;height:50px;}
.DropDiv{background-repeat:no-repeat;position:absolute;z-index:1000;color:White;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;font-family:'Microsoft YaHei';padding-left:2px;padding-right:2px;text-align:center;cursor:pointer;background:#000;border:2px dashed #EEE;width:86px;height:50px;margin:5px 14px 2px 0px;padding-top:4px;}
分享到QQ
分享到微博
微信扫一扫
