本js特效代碼兼容：ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等瀏覽器
<!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>jquery鼠標懸停縮略圖、實現放大跟隨展示大圖片特效代碼</title>
<link href="css/jstxdm.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(function(){
var x = 22;
var y = 20;
$("a.smallimage").hover(function(e){ //綁定一個鼠標懸停時事件
//新建一個p標簽來存放大圖片，this.rel就是獲取到a標簽的大圖片的路徑，然后追加到body中
$("body").append('<p id="bigimage"><img src="'+ this.rel + '" alt="" /></p>');
//改變小圖片的透明度為0.5，結合上面的CSS，看起來就象是圖片變暗了
$(this).find('img').stop().fadeTo('slow',0.5);
//將鼠標的坐標和聲明的x，y做運算并賦值給大圖片絕對定位的坐標，然后以fadeIn的效果顯示
$("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX + x ) + 'px'}).fadeIn('fast');
},function(){ //鼠標離開后
//將變暗的圖片復原
$(this).find('img').stop().fadeTo('slow',1);
//移除新增的p標簽
$("#bigimage").remove();
});
$("a.smallimage").mousemove(function(e){ //綁定一個鼠標移動的事件
//將鼠標的坐標和聲明的x，y做運算并賦值給大圖片絕對定位的坐標，這樣大圖片就能跟隨圖片而移動了
$("#bigimage").css({top:(e.pageY -y ) + 'px',left:(e.pageX + x ) + 'px'});
});
});
</script>
</head>
<body>
<ul id="gallery">
<li><a href="http://www.medicalspaofrye.com/" class="smallimage" rel="images/001_big.jpg"><img src="images/001_small.jpg" alt="" /></a></li>
<li><a href="http://www.medicalspaofrye.com/" class="smallimage" rel="images/002_big.jpg"><img src="images/002_small.jpg" alt="" /></a></li>
<li><a href="http://www.medicalspaofrye.com/" class="smallimage" rel="images/003_big.jpg"><img src="images/003_small.jpg" alt="" /></a></li>
</ul>
</body>
</html>jQuery鼠標懸停在圖片上顯示說明按鈕的HoverEx插件
jquery hover網頁左側鼠標懸停列表改變菜單樣式特效
jquery仿win8風格的圖片九宮格布局，鼠標懸停圖片文字切換特效
jquery實現中英文字切換導航條，鼠標懸停滑動下拉二級導航菜單
jquery實現圖片放大鏡插件，鼠標懸停局部圖片放大鏡頭顯示特效
jquery實現鼠標懸停圖片突出顯示大圖，另外帶標簽關鍵詞功能
jquery實現圖片放大鏡插件，鼠標懸停局部圖片放大鏡頭顯示特效
jquery banner插件實現全屏圖片放大縮小切換輪播特效代碼
jquery仿新浪微博圖片收起、查看放大、向左轉、向右轉展示特效代碼
