<!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="jquery.js"></script>
<style type="text/css">
.tishi{
border:1px dotted #ffffff;
width: 150px;
height: 25px;
font-size: 12px;
background-color: #e06e0c;
line-height:25px;
color: #fffefe;
font-weight: bolder;
text-align:center;
position:absolute;
display:;
}
#preview {position:absolute;background:#f6f6f6;padding:0px 10px;line-height:18px;color:#444;display:none;}
#preview img {max-height:200px;margin:0px;padding:0px;}
</style>
</head>
<body>
<img preview="https://pic.cr173.com/up/2018-4/2018413153151554.png" class="tooltip" title="点击设置新的域名">
<a class="pic" href="#" preview="<img src='https://pic.cr173.com/up/2018-4/201841315420651.jpg'>"><img src="https://pic.cr173.com/up/2018-4/2018413153151554.png" /></a>
<a class="pic" href="#" preview="https://pic.cr173.com/up/2017-4/201746151315574.jpg"><img src="https://pic.cr173.com/up/2017-4/2017461512577862.jpg" /></a>
<a class="pic" href="#" preview="<img src='https://pic.cr173.com/up/2017-1/201712491916764860.jpg'>"><img src="https://pic.cr173.com/up/2017-1/2017124918592583.jpg" /></a>
<a class="pic" href="#" preview="https://pic.cr173.com/up/2017-4/201746151315574.jpg"><img src="https://pic.cr173.com/up/2017-4/2017461512577862.jpg" /></a>
<a class="pic" href="#" preview="https://pic.cr173.com/up/2017-4/201746151315574.jpg"><img src="https://pic.cr173.com/up/2017-4/2017461512577862.jpg" /></a>
<a class="pic" href="#" preview="https://pic.cr173.com/up/2017-4/201746151315574.jpg"><img src="https://pic.cr173.com/up/2017-4/2017461512577862.jpg" /></a>
<script>
this.tooltip = function(){
var xOffset = 10;
var yOffset = 20;
var w = $(window).width();
$("[preview]").hover(function(e){
this_value = this.getAttribute("preview");
$("body").append("<div id='preview'><div><p>"+ this_value +"</p></div></div>");
$("#preview").css({top:(e.pageY - yOffset) + "px",zIndex:1000});
if(e.pageX < w/2){
$("#preview").css({left: e.pageX + xOffset + "px",right: "auto"}).fadeIn("fast");
}else{
$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left", "auto").fadeIn("fast");
}
},function(){
$("#preview").remove();
}).mousemove(function(e){
$("#preview").css("top",(e.pageY - xOffset) + "px");
if(e.pageX < w/2){
$("#preview").css("left",(e.pageX + yOffset) + "px").css("right","auto");
}else{
$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left","auto");
}
});
};
//页面提示内容
$(document).ready(function(){
tooltip();
});
</script>
</body>
</html>
苏公网安备 32070502010230号