利用jQuary实现文字浮动提示效果示例代码

代码如下:

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
/*文字提示*/
/*
（1）鼠标移入的时候，创建一个div它的内容是title属性的值
（2）规定位置，设置css样式
（3）鼠标移出的时候，移除div
（4）鼠标移动的时候，X Y轴的坐标要相应的变化
*/
$(function(){
var x = 7;
var y = 8;
$("a.tip").hover(function(){
var title = this.title;
var $div = $("<div id='newTip'>"+title+"</div>");
$("body").append($div);
$div.css({"position":"absolute","background":"pink"});
},function(){
$("#newTip").remove();
}).mousemove(function(e){
var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'});
});
})
</script>
</head>
<body>
<a href="#" class="tip" title="这是我的提示">这是我的提示</a>
</body>
</html>

赞 (0)

相关推荐

  • 利用jQuary实现文字浮动提示效果示例代码

    复制代码 代码如下: <html> <head> <meta charset="utf-8"/> <script type="text/javascript" src="script/jquery-1.4.2.min.js"></script> <script> /*文字提示*/ /* (1)鼠标移入的时候,创建一个div它的内容是title属性的值 (2)规定位置,设置cs

  • JQuery实现文字无缝滚动效果示例代码(Marquee插件)

    推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src=&quo

  • jquery实现多行文字图片滚动效果示例代码

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?pars

  • jQuery实现行文字链接提示效果的方法

    本文实例讲述了jQuery实现行文字链接提示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xht

  • Python 利用OpenCV给照片换底色的示例代码

    OpenCV的全称是:Open Source Computer Vision Library.OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows和Mac OS操作系统上.它轻量级而且高效--由一系列 C 函数和少量 C++ 类构成,同时提供了Python.Ruby.MATLAB等语言的接口,实现了图像处理和计算机视觉方面的很多通用算法.相比于PIL库来说OpenCV更加强大, 可以做更多更复杂的应用,比如人脸识别等. 1. 读入并显示图片 im

  • Android开发TextvView实现镂空字体效果示例代码

    记录一下... 自定义TextView public class HollowTextView extends AppCompatTextView { private Paint mTextPaint, mBackgroundPaint; private Bitmap mBackgroundBitmap,mTextBitmap; private Canvas mBackgroundCanvas,mTextCanvas; private RectF mBackgroundRect; private

  • 利用Matlab制作三子棋游戏的示例代码

    利用Matlab制作三子棋游戏的示例代码

    效果: 注: 由于用uifigure和uiaxes写的会比较慢,改成常规的axes和figure会快很多. 完整代码: function OX_chess fig=uifigure('units','pixels',... 'position',[350 100 500 500],... 'Numbertitle','off',... 'name','OX_chess',... 'Color',[1 1 1],... 'resize','off',... 'menubar','none'); a

  • 利用Qt实现可扩展对话框的示例代码

    利用Qt实现可扩展对话框的示例代码

    目录 一.项目介绍 二.项目基本配置 三.UI界面设计 四.主程序实现 4.1 dialog.h头文件 4.2 dialog.cpp源文件 五.效果演示 可扩展对话框通常用于用户对界面有不同要求的场合.通常情况下,只出现在基本对话窗体:当供高级用户使用或需要更多信息时,可通过某种方式的切换显示完整对话窗体(扩展窗体).切换的工作通常由一个按钮完成. 一.项目介绍 实现一个简单填写资料的对话框.通常情况下,只需要填写姓名和性别.若有特殊需要,还需要填写更多信息时,则切换至完整对话窗体,完整对话窗体

  • Vue中实现过渡动画效果示例代码

    Vue中实现过渡动画效果示例代码

    目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 同时设置两种动画(了解) 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在R

  • 利用JavaScript实现创建虚拟键盘的示例代码

    利用JavaScript实现创建虚拟键盘的示例代码

    目录 前言 项目基本结构 JavaScript 虚拟键盘的显示 虚拟键盘的按钮 CSS的键盘按钮设计 使用 JavaScript 激活虚拟键盘 前言 在线演示地址 项目基本结构 目录结构如下: 这是一个简单的 JavaScript 教程,教你如何创建JavaScript 虚拟键盘.虚拟键盘是一种屏幕输入法,如果你使用的是 Windows 操作系统,我相信你应该也使用过 Windows 中的默认虚拟键盘. 首先,我创建了一个可以看到输入字符的结果框,也就是我们可以在其中看到所有信息的显示器.此虚拟

随机推荐