- 浏览: 111741 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
wuliupo:
这个有一个BUG,当有的td设置 background-col ...
【JQuery】鼠标经过表格行变色 -
cheeruplc:
使用了以上的方式 我用一个for循环多次输出alert 循环 ...
页面跳转 -
xbm376:
谢谢分享!
Gponit和GLatLng的区别 -
baiyejianxin:
king130520 写道 MXML是FLEX中的标记语言,与 ...
FLEX -
king130520:
...
FLEX
<!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/xhtml"> <head runat="server"> <title>图片提示</title> <style type="text/css"> body { margin: 0; padding: 40px; background: #fff; font: 80% Arial, Helvetica, sans-serif; color: #555; line-height: 180%; } img { border: none; } ul, li { margin: 0; padding: 0; } li { list-style: none; float: left; display: inline; margin-right: 10px; border: 1px solid #AAAAAA; } /* tooltip */ #tooltip { position: absolute; border: 1px solid #ccc; background: #333; padding: 2px; display: none; color: #fff; } </style> <!-- 引入jQuery --> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(function () { var x = 10; var y = 20; $(".tooltip").mouseover(function (e) { this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'><img src=" + this.href + " alt='产品展示图' /><br />" + this.myTitle + "</div>"; $("body").append(tooltip); $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); }).mouseout(function () { this.title = this.myTitle; $("#tooltip").remove(); }).mousemove(function (e) { $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); }); }) </script> </head> <body> <form id="form1" runat="server"> <h3> 有效果:</h3> <ul> <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"> <img src="images/apple_1.jpg" /></a></li> <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"> <img src="images/apple_2.jpg" /></a></li> <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"> <img src="images/apple_3.jpg" /></a></li> <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"> <img src="images/apple_4.jpg" /></a></li> </ul> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h3> 无效果:</h3> <ul> <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"> <img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"> <img src="images/apple_2.jpg" alt="苹果 iPod nano" /></a></li> <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"> <img src="images/apple_3.jpg" alt="苹果 iPhone" /></a></li> <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"> <img src="images/apple_4.jpg" alt="苹果 Mac" /></a></li> </ul> </form> </body> </html>
发表评论
-
分享33个优秀的 jQuery 教程
2011-07-06 09:19 899转载:http://www.cnblogs.com/lhb25 ... -
细说Cookie
2011-07-04 11:51 832转载:http://www.cnblogs.com ... -
百度和优酷的搜索体验改善,类似Google Instant搜索
2011-06-30 10:02 1113转载:http://www.cnblogs.com/s ... -
jquery如何退出each循环的?
2011-06-24 14:37 1436在回调函数里return false即可,大多数jq的方法都 ... -
jquery获取当前鼠标的x、y位置
2011-05-25 11:49 2290<div id="testDiv&quo ... -
26个JQuery使用小技巧
2011-04-21 17:41 877The use of the jQuery library i ... -
JQuery UI Demo Darggable学习结果
2011-04-14 10:24 1398jQuery UI-Draggable 参数集合 jQu ... -
锋利的JQuery实例-用JQuery打造个性网站-详细页面
2011-03-18 17:25 1406<%@ Page Language="C#&q ... -
锋利的JQuery实例-用JQuery打造个性网站-首页
2011-03-18 17:23 1988<%@ Page Language="C#&q ... -
cookie插件
2011-03-12 09:45 776<!DOCTYPE HTML PUBLIC " ... -
去除左、右边空格
2011-03-12 09:37 819//插件编写 //调用时$.ltrim(string)去除左 ... -
css与attr、trigger()与toggle()的区别
2011-03-08 17:48 1333<select multiple=&quo ... -
复选框应用
2011-03-08 15:58 693前台用服务器控件CheckBoxList ... -
锋利的JQuery实例-视频展示效果
2011-03-07 17:14 1595<!DOCTYPE html PUBLIC " ... -
JQuery中动画效果的left值
2011-03-07 17:06 848//left: "+=50& ... -
JQuery事件对象的属性event
2011-03-03 11:35 1316event.type属性(获取事件的类型) $(&quo ... -
锋利的JQuery实例-超链接提示效果
2011-03-02 15:37 1144<!DOCTYPE html PUBLIC " ... -
锋利的JQuery学习笔记-认识JQuery
2011-03-02 15:09 9781.JQuery代码风格 链式操作风格 (1 ... -
js乱码解决方法
2009-03-25 13:19 1257有时候,我们在调用js文件的时候,会发现js文件里的中文变成乱 ... -
【JQuery】鼠标经过表格行变色
2009-03-11 13:52 6620[color=darkred][/color]<!DOC ...
相关推荐
jQuery实现鼠标移到链接提示显示图片功能插件 jquery实现鼠标经过链接放大图片特效代码 jquery实用Banner大图片横向切换效果 jquery实用产品图片展示动感切换效果源码 jquery平滑交换真彩色的图片逐渐变为黑白图像的...
85. 分享一款jQuery thumbnail惟美的图片Tip提示效果 86. 分享一款jquery仿lightbox无刷新图片显示插件PrettyPhoto下载 87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿...
85. 分享一款jQuery thumbnail惟美的图片Tip提示效果 86. 分享一款jquery仿lightbox无刷新图片显示插件PrettyPhoto下载 87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿...
3.jQuery表单验证插件EasyValidator 2.0带TIP提示效果 4.jQuery导航插件下载之支持三级的Menu暖色、动画、折叠功能的导航菜单 5.jquery美化CheckBox的插件下载 6.jQuery美化表单漂亮插件jqtransform下载 7....
85. 分享一款jQuery thumbnail惟美的图片Tip提示效果 86. 分享一款jquery仿lightbox无刷新图片显示插件PrettyPhoto下载 87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿...
本文实例讲述了jquery实现鼠标滑过后动态图片提示效果。分享给大家供大家参考。具体如下: 这里jquery实现的鼠标悬停图片提示效果,把鼠标放在图片上的时候,图片向右上角滑动并缩小,同时提示显示出来,类似幻灯片...
这是使用jQuery Tooltip Plugin弹出各种浮动提示效果插件的一些例子,用这个插件可以显示自定义的鼠标悬停提示,比如文字提示框、图片框,在鼠标放在特定位置时激活,鼠标移开后消失,如示例所示为弹出一个图片浮动...
jQuery为图片添加文字提示内容,鼠标放在图片上,会出现文字提示,效果相当不错,仅供学习参考。
jQuery tip cards插件用法实例:鼠标滑过翻转,比较集成的一个效果吧,不但是提示效果,还有焦点图切换特效,还有些文字和图片特效,可以自己整理下,用在自己的网页上,提示一下,请运行于支持HTML5的浏览器中。
4.10 综合案例分析—删除数据时的提示效果在项目中的应用/116 4.10.1 需求分析/116 4.10.2 效果界面/117 4.10.3 功能实现/118 4.10.4 代码分析/121 4.11 本章小结/123 第5章 jQuery的动画与特效/124 5.1 显示...
85. 分享一款jQuery thumbnail惟美的图片Tip提示效果 86. 分享一款jquery仿lightbox无刷新图片显示插件PrettyPhoto下载 87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿...
可自定义CSS样式,控制jQuery插件jQuery Image Flyout提示小图片显示效果。 实例代码 一,包含文件部分 [removed][removed] [removed][removed] [removed][removed] 二,HTML部分(DIV层内所用图片链接) <div>...
canvas滑动验证插件 jQuery Bootstrap弹窗加多步骤向导 jquery+html人脸抓拍 jQuery百度地图上传定位...实现图片提示效果 书页翻动作 图片滑动验证带提示 一维码和二维码集合 移动端日期选择插件 注销验证 自定义弹框
jQuery超酷图片切换效果JS代码 JQuery弹出层插件+PopupDiv-v1.0 jQuery仿Flash四焦点图片淡入淡出切换 jQuery工具提示插件clueTip0.9.8 JQuery模仿的LightBox图片效果 jQuery缩略图广告效果 JSTree大型树形菜单控件...
圆形旋转的jquery图片展示特效,老外制作的图片浏览特效,运行十分流畅,兼容性也相当好。点击右侧的控制按钮,图片会向下滚动一张,三角形对应的图片是当前图片,会在圆形的中心显示大图片,同时显示出文字提示内容...
本文实例讲述了jQuery实现漂亮实用的商品图片tips提示框效果。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
本文实例讲述了jQuery文字提示与图片提示效果实现方法。分享给大家供大家参考,具体如下: 1.效果如图: 2.文字提示代码: [removed] //<![CDATA[ $(function(){ var x = 10; var y = 20; $(a.tooltip)....
jQuery Captify滑动图片提示插件演示及调用方法(鼠标放上显示文字),基于captify.tiny.js和jquery插件实现,示例文件中有详细的使用方法,并附带了多种演示效果,在鼠标放在图片上的时候,文字信息由上到上滑出,...
本文实例讲述了jquery的幻灯片图片切换效果。分享给大家供大家参考。具体如下: 这是一款基于jquery的幻灯片图片切换效果代码,有缩略图和标题,可以自定义标题。 运行效果图: ——————-查看效果 下载源码——...
jQuery AutoComplete是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入 提示功能,而且示例本身也是...