WonderCSS

实现选取文字出现浮动框的JS方式

最近在工作中遇到一个有意思的任务,需要在竞价站上加入一个特殊的咨询框,那就是当用户用鼠标画选一段文字时,在鼠标旁弹出可操作的浮动框。其实这个效果很常见,比如在IE、火狐浏览器都会有这个效果,取字推荐等等。更常见的就是翻译文字时的选字即时翻译。

接到任务后在网上找到一些类似效果,然后将其JS相关部分单独提取了出来,以实现效果为下面的图片为示例:

选取文字弹出框

代码CSS部分:


<style>
.mouse_float {
	display:none; /* 必须 */
	position:absolute; /* 必须 */
	padding:4px 8px;
	color:#fff;
	font-size:12px;
	border:1px solid #000;
	background-color:#333;
	border-radius:4px;
	box-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);
}
.mouse_float a {
	color:#fff;
	text-decoration:none;
}
</style>

代码HTML部分:


<div id="ImHere" class="mouse_float"><a href="http://www.wondercss.com" target="_blank">JS悬浮框</a></div>

代码JS部分:


<script>
var eleImgShare = document.getElementById("ImHere");

var $sinaMiniBlogShare = function(eleShare, eleContainer) {
	var eleTitle = document.getElementsByTagName("title")[0];
	eleContainer = eleContainer || document;
	var funGetSelectTxt = function() {
		var txt = "";
		if(document.selection) {
			txt = document.selection.createRange().text;	// IE
		} else {
			txt = document.getSelection();
		}
		return txt.toString();
	};
	eleContainer.onmouseup = function(e) {
		e = e || window.event;
		var txt = funGetSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
		var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
		if (txt) {
			eleShare.style.display = "inline";
			eleShare.style.left = left + "px";
			eleShare.style.top = top + "px";
		} else {
			eleShare.style.display = "none";
		}
	};
}(eleImgShare);
</script>

By 于湛 发布于 2013.10.28 2,470 次浏览

实现选取文字出现浮动框的JS方式》上有1条评论

  1. Pingback引用通告: 利用 jQuery 实现鼠标单击页面弹出提示窗口 | WonderCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注