jQuery实现的简单文字提示效果模拟title
模拟title实现效果,可以修改文字的样式,换行等。
文件下载:
先看下效果截图:
代码分析:
<!-- 引用jQuery --><script src="jquery.js" type="text/javascript"></script> <style type="text/css"> body{margin:0;padding:40px;background:#fff;font:80% Arial, Helvetica, sans-serif;color:#555;line-height:180%; } p{clear:both;margin:0;padding:.5em 0; } /* tooltip */ #tooltip{position:absolute;border:1px solid #333;background:#f7f5d1;padding:1px;color:#333;display:none; } </style> <script type="text/javascript"> //<![CDATA[ $(function(){var x = 10; var y = 20;$("a.tooltip").mouseover(function(e){this.myTitle = this.title;this.title = ""; var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素 文字提示$("body").append(tooltip); //把它追加到文档中$("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"}).show("fast"); //设置x坐标和y坐标,并且显示}).mouseout(function(){ this.title = this.myTitle;$("#tooltip").remove(); //移除 }).mousemove(function(e){$("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"});}); }) //]]>
当然也可以不使用原来的title,将原来的title去掉,自己手写相关内容:
<style type="text/css"> /* tooltip */ #tooltip{position:absolute;border:1px solid #333;background:#f7f5d1;padding:5px;color:#333;display:none; } </style><script type="text/javascript" src="themes/ecshop_name1/js/jquery.tip.js"></script> <script type="text/javascript"> $(document).ready(function() {var x = 10; var y = 20;$(".pmrhf").mouseover(function(e){myTitle =" 乐视购为您精确计算出每天使用隐形眼镜的真正花费,<br/><b>隐形眼镜类</b>:根据使用周期,每副的日均花费,<br/><b>护理液类</b>:清洗并储存隐形眼镜的日均花费,<br/><b>润眼液类</b>:使用润眼液的日均花";var tooltip = "<div id='tooltip'>"+ myTitle +"<\/div>"; //创建 div 元素 文字提示$("body").append(tooltip); //把它追加到文档中$("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"}).show("fast"); //设置x坐标和y坐标,并且显示}).mouseout(function(){ $("#tooltip").remove(); //移除 }).mousemove(function(e){$("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"});}); });</script>
jQuery实现的简单文字提示效果模拟title相关推荐
- html5背景文字,HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
- html5显示字幕信息,HTML5 Placeholder实现input背景文字提示效果
本文作者html5tricks,转载请注明出处 这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但in ...
- HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
- html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
- jQuery酷炫的文字动画效果代码
jquery css3文字动画特效点击切换文字动态效果 jquery文字动画特效制作淡出淡进文字轮播动画效果代码 jquery文字提示点击按钮触发文字变大消失动画效果 jquery点击按钮淡出淡进动画 ...
- VB.NET学习笔记:自定义控件之扩展TEXTBOX控件——水印文字提示效果
测试环境:windows 7和Microsoft Visual Studio 2017 看到一些优秀软件里的TEXTBOX文本框都有水印文字提示应该输入什么样的信息,获取光标后提示文字消失,光标离开后 ...
- 改善用户体验之Alert提示效果
功能:替换传统弹出窗口提示 window.alert(""); 好处:界面美观,友善(最起码没有系统报警的声音). 引用方便,纯js脚本文件实现所有效果. 使用方法: <!D ...
- JQuery实现一个简单的鼠标跟随提示效果
效果体验:http://hovertree.com/texiao/jsstudy/2/ 实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建 ...
- jQuery图片提示和文字提示
图片提示: 效果如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
最新文章
- mysql data ibdata1_database - 如何在MySQL中收缩/清除ibdata1文件
- R语言包_rCharts
- tomcat与IIS服务器集成
- sersync2 完全安装配置说明(三) ----插件基本配置和使用
- linux diff patch 生成和打补丁
- qt中显示文件夹下的目录及文件的过滤
- Java实现余弦定理计算文本相似度
- 【我所认知的BIOS】—gt; uEFI AHCI Driver(5) — 第一个protocol最终要開始安装了
- session共享mysql_多服务器session共享之mysql共享
- python画图如何调整图例位置_Python-如何将图例排除在情节之外
- Golang——数据类型使用细节详解
- CSS具有最高优先级 !important
- [工具]将xml文件转换为html显示
- 相似度计算 java_Java基于余弦方法实现的计算相似度算法示例
- java static 区别_Java中static和final的区别
- 肯普纳级数收敛性的证明
- DDOS 攻击工具
- C语言程序设计:图书管理系统(超详细有登录系统,附代码和实验报告)
- 非合作博弈篇——混合策略博弈(mixed strategy)
- 基于SWMM及自主开发城市内涝一维二维耦合软件的复杂城市排水系统建模技术及在城市排涝、海绵城市等领域实践