web页面实现框选效果
因工作需要,今天上午用jquery写了一个网页上实现框选效果的js特效,附带有获取鼠标当前所在对象的获取方法,以及去掉浏览器自带的选中效果的css方案,现在贴出来给大家做个参考吧
body {/* 这是去掉浏览器自带的选中效果 */ -moz-user-select: none; -webkit-user-select: none; user-select: none; }
$(document).ready(function() { var x = y = mousekey = 0; $(document).bind("mousedown", function (e) { mousekey = true; //var currObj = e.originalEvent.srcElement; //这里是获取当前鼠标所在对象 $('body').css("cursor", "crosshair").append('<div id="divSelectArea" style="position:absolute;background-color:#e073d4;"></div>'); x = e.pageX; y = e.pageY; $('#divSelectArea').css({ top: e.pageY, left: e.pageX }).fadeTo(12, 0.2);//点击后开始拖动并透明; }).mousemove(function (e) { if (mousekey) { $('#divSelectArea').css({ top: e.pageY > y ? y : e.pageY, left: e.pageX > x ? x : e.pageX, height: Math.abs(e.pageY - y), width: Math.abs(e.pageX - x) }).html(e.originalEvent.srcElement.tagName); } }).mouseup(function () { x = y = mousekey = 0; $('#divSelectArea').remove(); $('body').css("cursor", "default"); }); });