鼠标划过图片title 提示实现
鼠标划过图片title 提示实现
<!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=utf-8" />
<title>图片提示</title>
<!-- 引入jQuery -->
<script src="../../scripts/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%;
}
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>
<script type="text/javascript">
//<![CDATA[
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/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"
});
});
})
//]]>
</script> </head>
<body>
<h3>有效果:</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="data:images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>
</body>
</html>
鼠标划过图片title 提示实现的更多相关文章
- CSS3 鼠标划上图片放大
td img{transition: all 1s}/*鼠标划上,图片1s全部显示完成*/ td img:hover{ transform: scale(5) translateX(50%) tran ...
- JavaScript函数实现鼠标指向后带图片的提示效果
转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从 ...
- easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法
easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法 /*easyui,鼠标划过悬浮,显示一个小提示框的方法*/ function toopTip(idOrClass,showText) ...
- 关闭myeclipse中烦人的鼠标划过,自动提示功能
eclipse越来越智能,身为码农的我却越来越伤心.虽然你很智能,但请你提供一些有用的信息给我,不要乱七八槽的,不问青红皂白就塞一大堆提示给我,对不起,哥不需要这些!!! 都知道,使用myeclips ...
- JavaScript总结之鼠标划过弹出div单击出现对话框
为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认 ...
- 黑马day18 鼠标事件&图片变大
有时候我们在淘宝网或者京东商城上浏览要购买的商品的时候当把鼠标移动到图图片上的时候会发现图片放大.然后鼠标移动,图片也会跟着移动,接下来我就使用jquery来实现这样的效果: 这是图片文件夹: < ...
- jQuery实现鼠标划过展示大图的方法
这篇文章主要介绍了jQuery实现鼠标划过展示大图的方法,实例分析了jQuery操作鼠标事件及图片处理的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery实现鼠标划过展示大图 ...
- CSS3实现鼠标移动到图片上图片变大
CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
随机推荐
- Seek the Name, Seek the Fame - POJ 2752(next运用)
题目大意:小猫是非常有名气的,所以很多父母都来找它给孩子取名字,因为找的人比较多,小猫为了摆脱这个无聊的工作,于是它发明了一种取名字的办法,它把孩子父母的名字合在一起,然后从这个名字里面找一个前缀,并 ...
- [置顶] ruby变量详解(收集+整理)
ruby的变量有局部变量,全局变量,实例变量,类变量,常量. 1.局部变量 局部变量以一个小写字母开头或下划线开头 局部变量有局部作用域限制(比如一个block内),它的作用域起始于声明处,结束于该声 ...
- PHP学习之[第06讲]数组、多维数组和数组函数
一.数组 ①Array(“aa”,12,true,2.2,”test”,50); ②Array(“title”=>“aa”, ”age”=>20); 1.创建: $arr= array( ...
- 第四节:教你如何快速让浏览器兼容ES6特性
写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...
- 【IOS】 XML解析和xml转plist文件(GDataXML)
iOS对于XML的解析有系统自带的SDK--NSXMLParser,鄙人愚拙,只会用GDataXML进行解析,这里仅介绍GData的使用.(以下图为例) 1.对于一个xml文件,先读取出来 NSDat ...
- 怎样找Android里自带的数据库?
首先先让它显示出来. 窗口window下的Show View 下的File Explorer(other里), 这时File Explorer窗口 就会显示出来,下一步我们找到data下的data,然 ...
- Codeforces 245G Suggested Friends - 交集set_intersection()
一些人互相是朋友(无向图连一条无向边),现在要添加一个推荐朋友的功能,如果对于x,有y,x与y不是朋友,但是y和x有共同的朋友,并且共同的朋友最多,那么y可以推荐给x.问对于每一个人,有多少人值得推荐 ...
- Command 命令模式
简介 将来自客户端的请求传入一个对象,从而使你可用不同的请求对客户进行参数化.用于[行为请求者]与[行为实现者]解耦,可实现二者之间的松耦合,以便适应变化. 将一个请求封装为一个对象,从而使你可用不同 ...
- Vijos P1325桐桐的糖果计划(有向图双连通分量)
/*重边不能删 不能删 不能删...*/ #include<iostream> #include<cstdio> #include<cstring> #define ...
- gvim & vim
安装了 GVim for Windows. 一 普通功能配置 配置文件 _vimrc 在安装目录下面. 关闭闪屏和声音提示功能: set visualbell t_vb= "关闭visual ...