HTML布局
<html>
<head>
<base href="<%=basePath%>" target="_blank" rel="external nofollow" >
<title>圖檔提示放大器</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css" target="_blank" rel="external nofollow" >
-->
<style type="text/css">
body {
margin: 0;
padding: 40px;
}
li {
list-style: none;
margin-left: 15px;
float: left;
margin-top: 40px;
border: 1px solid #AAAAAA;
}
#tooltip{
position: absolute;
border: 3px solid #ccc;
background: #455;
padding:2px;
display:none;
color:#fff;
}
</style>
<script type="text/javascript" src="<%=path %>/lib/jquery_1.8.3.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/ImageAmplify.js"></script>
</head>
<body>
<ul>
<li><a οnclick="" href="<%=path %>/img/apple_1_bigger.jpg" target="_blank" rel="external nofollow" title="蘋果MP3"><img src="<%=path %>/img/apple_1.jpg" alt="蘋果MP3"/></a></li>
<li><a href="<%=path %>/img/apple_2_bigger.jpg" target="_blank" rel="external nofollow" title="蘋果ipod"><img src="<%=path %>/img/apple_2.jpg" alt="蘋果ipod"/></a></li>
<li><a href="<%=path %>/img/apple_3_bigger.jpg" target="_blank" rel="external nofollow" title="蘋果iphone3GS"><img src="<%=path %>/img/apple_3.jpg" alt="蘋果iphone3GS"/></a></li>
<li><a href="<%=path %>/img/apple_4_bigger.jpg" target="_blank" rel="external nofollow" title="蘋果iMAC"><img src="<%=path %>/img/apple_4.jpg" alt="蘋果iMAC"/></a></li>
</ul>
</body>
</html>
jQurey代碼
$(function(){
var x = 10;
var y = 20;
$("li a").live('click',function(event){
//alert("點選事件停用");
event.preventDefault();
});
$("li a").mouseover(function(e){
//将擷取到的a标簽title指派新變量
this.myTitle = this.title;
//alert(this.myTitle);
this.title = "";
var imgTitle = this.myTitle? "<br/>"+this.myTitle : "";//如果擷取到的title存在輸出title
var tooltip = "<div id='tooltip'><img src='"+this.href+"' alt='産品預覽圖' />"+imgTitle+"</div>";
//向body中添加放大圖檔的div
$("body").append(tooltip);
$("#tooltip").css({"top" : (e.pageY+y)+"px","left" : (e.pageX+x)+"px"}).show('fast');
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip").css({"top" : (e.pageY+y)+"px","left" : (e.pageX+x)+"px"}).show('fast');
});
});
![動感卡點效果。如何制作這種動感卡點的效果？·第一段，打開剪映，視訊根據音樂進行卡點。·第二段，第十段，在畫中畫選擇動感放[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)