<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<!--在文章内添加 selected-article ID-->
<div id="selectedArticle">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
document.writeln("<style>");
document.writeln(".tooltip {width:219px;height:33px;background:url(wenda.gif) no-repeat left top;}");
document.writeln(".tooltip a {width:219px;height:33px;display:block;}");
document.writeln("</style>");
$(function () {
//将该id下的文章，鼠标选中松开后弹窗
$("#selectedArticle").mouseup(function (e) {
var x = 10;
var y = 10;
var r = "";
if (document.selection) {
r = document.selection.createRange().text;
}
else if (window.getSelection()) {
r = window.getSelection();
}
if (r!= "") {
var bowen = " ";
var tooltip = "<div id='tooltip' class='tooltip'><a href='###' target='_blank'>" + bowen + "</a></div>";
$("body").append(tooltip);
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px",
"position": "absolute"
}).show("fast");
}
}).mousedown(function () {
$("#tooltip").remove();
});
});
</script>
</body>
</html>
效果图：
相关推荐
自己搜集了很多js插件 针对提示框我们整理下 最好的一个，所有的内容我都放进去了 所有的提示框都有，大家尽管放心去用 支持配置 json 写法等等 漂亮的外观 demo 全部都有，好的东西我自己愿意拿出来与别人分享，...
在IT行业中，jQuery（通常简称为jq）是一种广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本话题主要围绕"鼠标点击弹窗"的jQuery效果展开，这是一个常见的用户界面...
标题“jq、js实现的弹窗”暗示我们将讨论如何用jQuery库和JavaScript原生语法创建弹出窗口，这些弹窗可以用于显示警告、确认信息，或者进行用户交互。jQuery是一个轻量级、高性能的JavaScript库，它简化了DOM操作、...
"多种JQ弹方式"暗示这个压缩包中可能包含了多种弹窗效果，比如淡入淡出、滑动、旋转等动态效果，以及不同触发机制，例如点击按钮、页面加载完毕、Ajax请求完成后等场景触发弹窗。这样的设计使得弹窗插件能够更好地...
在`js`文件（如`index.js`）中，使用jQuery的`$(document).ready()`函数确保在DOM加载完成后执行弹窗代码： ```javascript $(document).ready(function() { // 页面加载完成后弹出弹窗 $("#popup").fadeIn(); /...
在本项目"JQ封装弹窗练习"中，我们将深入探讨如何使用jQuery来封装一个自定义的弹窗功能，即模态框或提示框。 首先，我们需要理解“封装”的概念。在编程中，封装是指将代码组织成独立的模块，以便重用和降低复杂性...
一个设置display:none 的元素,调用 dailog 方法传入 bol 可根据布尔值弹出或收起,基于jq 需用jq对象调用
在这个“JQ多个好看的弹窗动画”主题中，我们将深入探讨如何利用jQuery创建引人注目的弹窗效果。 1. **jQuery基础知识** - jQuery对象与DOM元素：jQuery通过$符号封装了JavaScript原生DOM操作，提供了一套更加简洁...
// 提交后关闭弹窗 }, error: function(jqXHR, textStatus, errorThrown) { alert("提交失败：" + textStatus); } }); }); ``` 在上述代码中，`serialize()`方法用于将表单数据序列化为URL编码格式，然后通过...
在JQuery中，可以通过选择器选中元素后使用hover()方法来简化这一过程，hover()方法接受两个函数作为参数，分别对应mouseover和mouseout事件。 4. 提示框跟随鼠标移动：如果需要提示框跟随鼠标在目标元素上移动，...
【标题】"jq鼠标滚动视差效果.zip"所涉及的知识点主要集中在JavaScript（JS）特效的实现，特别是鼠标滚动事件的应用以及视差滚动效果。视差滚动是一种网页设计技术，通过让不同背景元素以不同速度移动，营造出深度感...
其中，“JQ鼠标滚轮事件”是jQuery提供的一种方便的方式来监听和处理用户的鼠标滚轮动作。这个功能允许开发者在用户滚动鼠标滚轮时执行特定的代码，为网页添加更丰富的交互性。 首先，我们来理解一下鼠标滚轮事件的...
"jq弹窗各种效果插件"这个主题涉及到的是使用jQuery来实现各种弹出窗口（也称为模态对话框或提示框）的插件和效果。在网页设计中，弹窗常用于用户通知、确认操作、展示详细信息或进行表单输入等场景。 首先，我们要...
根据给定的文件信息，我们可以总结出以下关于jQuery在网页设计中的应用以及如何利用鼠标事件显示和隐藏部分内容的关键知识点： ### 1. jQuery基础概念与功能 jQuery是一种快速、简洁的JavaScript库，它极大地简化...
这段代码会在鼠标松开时检查是否仍在目标元素上，如果不是，则移除所有`.myElement`元素上的`.clicked`类。 总的来说，结合CSS和JavaScript，我们可以实现"鼠标点击后保留样式同鼠标经过样式"的效果，提供更加直观...
在本项目中，我们关注的是一个使用jQuery和CSS3实现的动态效果，即"JQ鼠标经过标题向上弹出特效.zip"。这个特效主要用于增强网页的互动性，当用户将鼠标悬停在特定标题上时，会有一个图像或信息框自下而上弹出，提供...
【标题】"jq鼠标滚动视差效果"是一个利用JavaScript库jQuery实现的互动视觉特效，它在用户滚动鼠标滚轮时，创造出一种深度感和动态视差。这种效果常见于现代网页设计中，能够提升用户体验，使浏览过程更具沉浸感。 ...
在网页交互设计中，弹窗通常用于提示信息、展示内容或进行用户交互，而全屏弹窗则能提供更沉浸式的用户体验。 首先，让我们深入了解jQuery弹窗插件的工作原理。弹窗插件通常是基于jQuery的DOM操作和事件处理来构建...
"jq 弹窗插件"是基于jQuery的一个功能组件，主要用于创建提示框和对话框，使得开发者能够方便地在网页上实现各种交互式弹出窗口。 这个插件的核心特点在于它的高效性和易用性。"一次载入，多次调用"意味着只需在...