悬浮查看大图,悬浮插件,自动适应浏览器宽高.
<!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>
<title>悬浮查看大图,悬浮插件</title>
<style type="text/css">
body {
margin: 0; padding: 0;
font: normal 12px Verdana, Geneva, sans-serif;
line-height: 1.8em;
color: #333;
}
* {outline: none;}
img {border: none;}
h1 {
font: 4em normal Georgia, 'Times New Roman', Times, serif;
padding: 10px 0;
color: #aaa;
text-align: center;
}
h1 span { color: #666; }
h1 small{
font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 0.65em;
display: block;
color: #666;
}
h1 a {text-decoration: none;}
a {color: #d60000; text-decoration: none;}
/*--Tooltip Styles--*/
.tip {
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.container {width: 960px; margin: 0 auto; overflow: hidden;}
</style>
</head>
<body>
<script type="text/javascript" src="Js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
</script>
<div class="container">
<a href="JavaScript:void(0)" target="_blank" class="tip_trigger">测试 ,悬浮看大图。<span class="tip">
<img src="Images/1269599175.jpg" alt="" /></span> </a>
</div>
</body>
</html>
