<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自動輪播 Jquery</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
/* 圖片放大tooltip */
#tooltip{
position:absolute;
border:1px solid #eeeeee;
background:#eeeeee;
padding:1px 1px 1px 1px;
display:none;
}
.main {
display: flex;
justify-content: space-between;
width: 600px;
height: 500px;
margin: 0 auto;
margin-top:10%;
border: 1px solid pink;
}
.main div {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<a href="img/1.jpg" class="tooltip big-circle" target="_blank" id="">
<img src="img/1.jpg" style="max-width:57px; max-height:53px;"/>
</a>
<a href="img/1.jpg" target="_blank">檢視原圖1</a>
</div>
<div class="right" style="float: right">
<a href="img/2.jpg" class="tooltip big-circle" target="_blank" id="">
<img src="img/2.jpg" style="max-width:57px; max-height:53px;"/>
</a>
<a href="img/2.jpg" target="_blank">檢視原圖2</a>
</div>
</div>
<script>
$(document).ready(function () {
var x = 0;
var y = 20;
$(".big-circle").mouseover(function (e) {
var tooTip = "<div id='tooTip'><img style='max-width:170px; max-height:330px;margin: 0 auto;' src='" + this.href + "'></img><div>";
$("body").append(tooTip);
$("#tooTip").css({ position: "absolute", width: "200px", height: "200px",
'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px"
}).show("fast");
}).mouseout(function () {
$("#tooTip").remove();
}).mousemove(function (e) {
$("#tooTip").css({ position: "absolute", 'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px"});
});
});
</script>
</body>
</html>
