js-javascript-鼠标悬停弹出大图窗口的源代码

原创 2013年12月03日 22:17:04

js-javascript-鼠标悬停弹出大图窗口的源代码如下所示


<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JQ实现鼠标经过显示大图效果-微信账号:白云机场交流论坛</title>
<meta name="description" content="JQ实现鼠标经过显示大图效果 微信账号:白云机场交流论坛" /><meta name="keywords" content="JQ实现鼠标经过显示大图效果 keleyi.com" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(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='微信账号:白云机场交流论坛产品' width='765' height='574' />" + imgTitle + "</div>";
$("body").append(tooltip);
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
}).mouseout(function (e) {
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function (e) {
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
})
</script>
<style>
ul{margin: 30px auto; width:1440px;}
ul li{float: left; padding-right: 20px; list-style: none;}
ul li img{width: 77px; height: 57px; padding: 6px; border: 1px solid #ccc; background-color:#eee; -webkit-border-radius: 8px;}
#tooltip{
position: absolute;
background-color: #eee;
border: 1px solid #999;
width: 765px;
height: 590px;
-webkit-border-radius: 8px;
font-family: "微软雅黑";
padding: 20px;
}
</style>
</head>
<body>
<div><a href="http://keleyi.com/a/bjac/h12vjfyv.htm" target="_blank">原文</a></div>
<div><ul>
<li><a href="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_hood.jpg" title="微信账号:白云机场交流论坛1" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_hood.jpg" alt="微信账号:白云机场交流论坛1" /></a></li>
<li><a href="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_side.jpg" title="微信账号:白云机场交流论坛2" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_side.jpg" alt="微信账号:白云机场交流论坛2" /></a></li>
<li><a href="http://keleyi.com/keleyi/phtml/image/img/bmw_m3_gt.jpg" title="微信账号:白云机场交流论坛3" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m3_gt.jpg" alt="微信账号:白云机场交流论坛3" /></a></li>
<li><a href="http://keleyi.com/keleyi/phtml/image/img/corvette_pitstop.jpg" title="微信账号:白云机场交流论坛4" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/corvette_pitstop.jpg" alt="微信账号:白云机场交流论坛4" /></a></li>
</ul></div><div>提醒您:把光标移动到图片上查看效果。</div>
</body>
</html>





css实现鼠标悬停图片放大显示

* { margin: 0; padding: 0; font-family: "微软雅黑"; } .avatar { display: block; ...
  • u010394015
  • u010394015
  • 2016年07月15日 15:05
  • 9512

js实现鼠标悬停文字上显示图片

js部分 function showPic(e,sUrl){ var x,y; ...
  • a12331244
  • a12331244
  • 2017年08月30日 13:54
  • 910

js 鼠标放置图片展示大图并跟随鼠标移动

js 鼠标放置图片展示大图并跟随鼠标移动html 页面中,鼠标放置图片上方,显示大图并跟随鼠标移动,当鼠标移出图片内容时,大图消失 源码内容如下: ...
  • Eric19911992
  • Eric19911992
  • 2017年02月28日 16:59
  • 536

JS特效:鼠标悬停显示提示

function showtip2(current,e,text) { if (document.readyState=="complete") { document.all.tooltip2...
  • hn307165411
  • hn307165411
  • 2014年04月13日 21:33
  • 12585

利用javaScript实现鼠标在文字上悬浮时弹出悬浮层

在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失。比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: ...
  • u012116457
  • u012116457
  • 2015年05月28日 17:08
  • 7116

鼠标滑过显示图片大图效果

描述: 当用户将鼠标放到 图片上时,显示图片的大图。 效果图: 说明: 用到了mouseover、mouseout、mousemove三个事件,分别表示鼠标滑过图片、鼠标移除图片、鼠标...
  • QianShouYuZhiBo
  • QianShouYuZhiBo
  • 2014年06月06日 21:46
  • 2722

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

  • qq_15253407
  • qq_15253407
  • 2016年07月11日 16:02
  • 1844

js 鼠标放置图片展示大图并跟随鼠标移动

js 鼠标放置图片展示大图并跟随鼠标移动html 页面中,鼠标放置图片上方,显示大图并跟随鼠标移动,当鼠标移出图片内容时,大图消失 源码内容如下: ...
  • Eric19911992
  • Eric19911992
  • 2017年02月28日 16:59
  • 536

鼠标放上去,出现大图预览效果

前天逛淘宝,看见淘宝的商品图片,鼠标放上去就会就会有相应大图的预览,于是就想着自己能不能做一个这样的效果出来,毕竟以前也看过这样类似的教程。 思路:             一:页面布局       ...
  • Mr_YanYan
  • Mr_YanYan
  • 2017年03月23日 18:18
  • 687

【菜鸟手打js】@弹出遮罩层显示大图之一

需求:页面上有图片列表,排列显示产品小图片,希望点击时像QQ空间查看相片一样出一个遮罩层,显示大图出来。 分析: 1.需要一个小图点击事件,触发遮罩层的显示。 2.遮罩层默认隐藏,用绝对定位,完...
  • z20905547
  • z20905547
  • 2016年03月17日 01:28
  • 1086
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js-javascript-鼠标悬停弹出大图窗口的源代码
举报原因:
原因补充:

(最多只允许输入30个字)