jquery图片提示效果

jquery+css3实现图片提示效果 一款jquery+css3实现图片提示效果的例子。 立即下载

如图所示是我的效果!

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超链接提示效果</title>
<script src="../jqury/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function(){
      var x=10;
   var y=20;
     $("a.tooltip").mousemove(function(e){
      this.myTile=this.title;
   this.title="";
      var tooltip="<div id="tooltip">"+this.myTile+"</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(fucntion(e){
      $("#tooltip").css({
       "top": (e.pageY+y)+"px",
    "left": (e.pageX+x)+"px"
   });
  });
 
  //图片提示
  $("a.tooltip1").mousemove(function(e){
      this.myTile=this.title;
   this.title="";
   var img_tilte=this.myTitle?</br>"+this.myTitle:"";
      //创建div对象
     $("body").append("<div id="tooltip1"><img src="+this.href+" alt="预览图片"/>"+img_title+"</div>");   //将它追加到文档中
   $("#tooltip1").css({
       "top": (e.pageY+y)+"px",
    "left": (e.pageX+x)+"px"
   }).show("fast");             //设置x和y并显示
  }).mouseout(function(){
      this.title=this.myTitle;
      $("#tooltip").remove();
  }).mousemove(fucntion(e){
      $("#tooltip").css({
       "top": (e.pageY+y)+"px",
    "left": (e.pageX+x)+"px"
   });
  });
 });
</script>
</head>

<body>
<h3>超链接提示效果</h3>
<p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示1">提示2.</a></p>
<p><a href="#" title="这是自带提示1">提示1.</a></p>
<p><a href="#" title="这是自带提示2">提示2.</a></p>

<h3>图片提示</h3>
<p><a  href="img/1.jpg" class="tooltip1" title="这是我的超链接提示1"><img src="img/1.jpg" alt="图一"/></a></p>
<p><a href="img/2.jpg" class="tooltip1" title="这是我的超链接提示1"><img src="img/2.jpg" alt="图二"/></a></p>
<p><a href="img/3.jpg" title="这是自带提示1"><img src="img/3.jpg" alt="图三"/></a></p>
<p><a href="img/4.jpg" title="这是自带提示2"><img src="img/4.jpg" alt="图四"/></a></p>
</body>
</html>

以上是我的代码部分,但是我要的效果不出来啊。

希望哪位同仁给予帮助。

jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影) 本文实例讲述了jQuery实现漂亮实用的商品图片tips提示框效果。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [removed][removed] <style type="text/css"> #tip {position: 立即下载

相关推荐

jquery实现鼠标滑过后动态图片提示效果实例

本文实例讲述了jquery实现鼠标滑过后动态图片提示效果。分享给大家供大家参考。具体如下: 这里jquery实现的鼠标悬停图片提示效果,把鼠标放在图片上的时候,图片向右上角滑动并缩小,同时提示显示出来,类似幻灯片一样的效果,推荐给大家学习借鉴。 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>jQuery图片动态信息显示幻灯效果</title> <style> .galleryContainer {width: 1024px;} .galleryImage { background-color:black; width:325px; heig

jQuery通知插件 -- noty

noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件。 当前最新版本为2.1.0: 从https://github.com/needim/noty可以获取最新源代码。 布局样式 支持的提示样式,每种样式都有预定义好的css样式: alert: 默认的提示样式 success: 成功 error: 错误 ...

anyuta5577的博客 285

ArcGIS Enterprise10.9.1的Windows安装部署

ArcGIS Enterprise10.9.1中Windows版本安装介绍。

qq_36250702的博客 2446

jQuery学习实例:图片提示效果

顾名思义,图片提示效果就是当鼠标滑过图片时,提示大图片及说明文字。 下面先放出完整的jQuery代码:

wjydd666的博客 652

从MRF8P9040N数据手册到ADS仿真:手把手教你搞定LDMOS功放设计(附完整模型下载)

本文详细解析了MRF8P9040N LDMOS功率放大器的数据手册关键参数,并提供了在ADS中进行仿真的完整指南。从模型导入、直流工作点验证到负载牵引与阻抗匹配设计,逐步指导工程师完成高效功放设计。文章还包含调试技巧和常见问题解决方案,帮助优化射频功放性能。

weixin_27015733的博客 490

TC3XX - MCAL知识点(二十四):UART MCAL配置及代码实战

UART驱动程序负责按照UART协议提供通信服务。ASCLIN模块为异步通信提供硬件支持,实现UART协议。UART驱动程序提供了配置、初始化、数据传输、接收等功能,还提供了中止传输和中止接收 abort等可选特性。软硬件匹配关系如下:UART驱动程序使用ASCLIN进行数据的传输和接收。驱动程序使用的关键硬件功能特性是:1、全双工异步工作模式2、支持半双工工作模式3、16字节的TXFIFO4、16字节的RXFIFO5、2 ~ 16位数据帧6、校验位生成/检查7、一个或两个停止位。

梦想技术家 1832

jQuery之图片提示效果

目标: 我们的目标是实现鼠标在图片上移动的时候,可以看到大图展示和超链接自带的提示。 实现具体步骤如下: 当鼠标滑入图片超链接,创建一个<div>元素,内容为插入的图片及其title属性的值; 将创建的元素追加到文档中; 为元素设置x、y坐标,使其显示 在鼠标位置的旁边; 当鼠标滑出图片超链接时,移除<div>元素。 代码如下: <!DOCTY...

weixin_30905133的博客 312

6、 实时家禽健康识别与疾病检测系统的深入解析

本文深入解析了一种基于物联网的实时家禽健康识别与疾病检测系统,结合图像分析和音频分析技术,能够有效识别病鸡并防止疾病传播。文章详细介绍了系统的测试环境、数据采集与预处理方法、图像与音频分析流程,并对系统性能进行了全面评估。最后提出了未来改进方向,包括多模态融合、深度学习应用及实时性优化等。

weixin_28840811的博客 186

图片提示效果(jquery)

思路: 1.当鼠标滑入超链接:创建一个div元素,div元素的img为a的或href    内容为title的值   讲创建的元素追加到文档中,为它设置X坐标和y坐标,使他显示在鼠标位置的旁边。 2当鼠标滑出超链接时,删除div 3.当鼠标在图片上滑动时,再调用上面的函数为它设置X坐标和y坐标,使他显示在鼠标位置的旁边。 图片提示 body{ margin:0;

努力,追梦的博客 653

MFC 中实现 WebSocket 客户端以支持实时双向通信

3. **协议兼容**:若服务器使用 `wss://`(加密),需在 `lws_client_connect_info` 中配置 SSL 相关参数(`ssl_connection = LCCSCF_USE_SSL`)。- 编辑框(`m_editUrl`):输入 WebSocket 服务器地址(如 `ws://echo.websocket.events`)。2. 将编译后的库文件(`.lib`、`.dll`)和头文件路径添加到 MFC 项目中(项目属性 -> VC++ 目录)。// UI:服务器地址。

寒寒豆豆软件公司的博客 202

【FastDDS】Discovery ( 01-overview )

Fast DDS 提供了多种发现机制用于自动匹配数据写入器和读取器,包括简单发现(默认兼容RTPS标准)、静态发现(可跳过SEDP阶段)、集中式的发现服务器架构以及手动RTPS发现。发现过程分为参与者发现(PDP)和端点发现(EDP)两个阶段,PDP通过多播/单播公告确认参与者存在,EDP则匹配主题和数据类型相同的端点。系统支持配置发现协议、租约期限等通用参数,以及各机制特有设置如静态EDP XML配置、服务器定位器等。此外还支持通过监听器实现发现回调功能。

Ray Home 721

jq-图片提示效果

图片提示效果 #ul_pic li{float:left; margin-right:20px; list-style:none;} #ul_pic li img{ border:1px solid #000; } $(function(){ var x = 0; var y = 20; $("#ul_pic img").mo

马哥靶子 1031

泰凌微8258入门教程 环境篇④——开发板+烧录器 8258mesh新手套件购买

工欲善其事,必先利其器。 淘宝链接:https://item.taobao.com/item.htm?

4128

JQuery实现超链接和图片提示预览效果

其实现在的浏览器已经具有提示功能,只需要加入title功能就行了,但是这个提示效果很缓慢,用户体验并不是很好,所以有必要自己做一个。这次利用Jquery的DOM操作来实现一个简单的效果!

angula 2613

筹码峰五句口诀,看懂主力的秘密动作!(附实战图示)

筹码图的价值在于,它不像K线那样容易造假。主力可以骗线,但骗不了筹码分布。主力在不在;是吸筹还是出货;接下来是变盘还是震荡。这五句口诀可以说是“筹码阅读的入门圣经”:单峰坚挺变盘在即,双峰对垒高抛低吸;上峰不移主力在跑,多峰林立行情不止;下峰不移不离不弃,筹码识庄稳中取利!📌市场从来不是靠猜,而是靠看清。筹码,就是主力最真实的痕迹。如果你想学会提前布局、跟庄不被甩,学会看筹码峰——这一步必须打牢!

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用,接口、架构、性能全搞定。 1165

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

jQuery开发之超链接提示效果和图片提示效果

1,超链接提示效果 超链接自带的有提示效果的,这里就把自己定义的提示效果放在一起可以进行一下比较。示例代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-T

3372

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

jQuery笔记:网站的超链接和图片的提示效果

文章目录超链接提示效果图片提示效果 超链接提示效果 在现代浏览器中,超链接中加入title属性就可以实现鼠标悬停提示效果,如: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm...

weixin_42124234的博客 534

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

jQuery里面的图片提示效果

在页面设计:   demo03.html --> ul{   list-style-type: none; } ul li{   float: left;   margin-left: 10px; } img{  border: 1px solid threedface; }

ailiandeziwei的专栏 751

jQuery实现超链接提示和图片提示效果

利用jQuery对DOM操作的几个方法就完成了很友好的动态提示效果。 jQueryDOM操作练习 #tooltip{ position: absolute; border: red 1px solid; background: yellowgreen;

yingzizizizizizzz的专栏 1475

html设置图片上下移动,jQuery实现百度图片移入移出内容提示框上下左右移动的效果...

闲来无聊,看到百度图片hover的时候提示框的效果,遂想试一试自己能否实现。百度图片hover的效果:需求:1. 当鼠标从图片上部移入的时候,提示框从上部移到正常位置。从上部移出的时候,提示框从正常位置移到上部。2. 当鼠标从图片左部移入的时候,提示框从左部移到正常位置。从左部移出的时候,提示框从正常位置移到左部3. 当鼠标从图片右部移入的时候,提示框从右部移到正常位置。从右部移出的时候,提示框从...

weixin_39625337的博客 770

jquery-纯jQuery制作网站超链接和图片提示效果

超链接和图片提示效果 提示1 提示2 自带提示1 自带提示2 $(function () { var x = 10; var y = 20; $("a.tooltip").mouseover(function (e) { //当鼠标滑入时,给对象添加一个新属性,并把title的值

Anna 880

jquery鼠标悬停时的放大图片的图片提示效果

jquery实现的图片特效,鼠标在图片上悬停时,可以放大图片来显示,可看作是图片悬停提示效果吧。

qq_34388607的博客 789

jquery 图片提示放大效果

<style> .tooltip img{ width: 300px;height: 300px; } li{display: inline;} </style> <ul> <li><a href="img/1.j...

chuosaomeng9354的博客 175

锋利的JQuery实例-图片提示效果

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head runat="serv.

luckyjaky的专栏 144
上一篇: Myeclipse的快捷键
下一篇: jQuery用法大全
jacking124
博客等级 码龄16年 18粉丝 6原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值