关闭

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

标签: jsjavascript鼠标悬停弹出大图窗口
4648人阅读 评论(0) 收藏 举报

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>





0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:919321次
    • 积分:11362
    • 等级:
    • 排名:第1379名
    • 原创:259篇
    • 转载:72篇
    • 译文:3篇
    • 评论:126条
    最新评论