Jquery實作滑鼠移動放大圖片功能實例

Jquery實作滑鼠移動放大圖片功能實例_jquery

WBOY

發布： 2016-05-16 16:07:42

原創

1214 人瀏覽過

本文實例講述了Jquery實現滑鼠移動放大圖片功能的方法。分享給大家供大家參考。具體分析如下：

做畢業設計，老師看完小樣後，嫌棄我購物車裡商品圖片太大，不美觀，讓美化個效果。上網查查程式碼，修改了一個簡單版的。

使用的是jquery，未使用JavaScript取得滑鼠狀態，這主要和JavaScript需在標籤本身內含寫出所調用到的動作，太麻煩了，一會就把自己搞糊塗了，使用jquery技術直接根據標籤的id，class等等，就可以辨識出來觸發條件，直接作出回應(百度百科上說這是jquery很大的一個優勢，不用再在html裡面插入一堆js來調用命令，只需要定義id即可)。

使用這個技巧的目的是為了實現在購物車內閱覽貨物時，只需要顯示小圖，當滑鼠滑過時顯示大圖。主要是為了提高使用者體驗，否則在購物車大圖顯示商品資訊會直接影響整個網頁的美觀。

實現出來的樣子就是這樣。

原始碼：

<!DOCTYPE HTML> 
<html> 
<head> 
<title>cart</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- 要把jquery-1.9.1.min.js导进去，不导出不来 --> 
<script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
<script language="javascript"> 
$(function(){ 
var size=3.0*$('#image1').width(); 
$("#image1").mouseover(function(event) { 
var $target=$(event.target); 
if($target.is('img')) 
{ 
$("<img id='tip' src='"+$target.attr("src")+"'>").css({ 
"height":size, 
"width":size, 
}).appendTo($("#imgtest"));
/*将当前所有匹配元素追加到指定元素内部的末尾位置。*/ 
} 
}).mouseout(function() { 
$("#tip").remove();/*移除元素*/ 
}) 
}) 
</script> 
 <style type="text/css"> 
  #imgtest{  position:absolute;
         top:100px; 
         left:400px; 
         z-index:1; } 
  table{    left:100px; 
         font-size:20px; }
  </style> 
</head> 
<body> 
<div id="imgtest"></div> 
<br/> 
<br/> 
<table border="1" style="text-align:center;" align="center" >
 <thead style="height:50"> 
  <td style="WIDTH: 300px"> 
    商品名称 
  </td> 
  <td style="WIDTH: 60px"> 
    图片 
  </td> 

  <td style="WIDTH: 170px"> 
    数量 
  </td> 
  <td style="WIDTH: 170px"> 
    价格 
  </td> 
  <td style="WIDTH: 250px"> 
    小计 
  </td> 
 </thead> 
 <tbody> 
   <td class="name"></td> 
   <td class="image">               
   <img src="1.jpg" width="40px" height="40px" id="image1"/>
   </td> 
   <td class="quantity"></td> 
   <td class="price"></td> 
   <td class="total">元  </td> 
   </tr> 
   <tr> 
  <td colspan="4" class="cart_total"> 
  <br></td> 
  <td> 
    <span class="red">总计:</span> 元
  </td> 
   </tr> 
 </tbody> 
</table> 
</body> 
</html>

登入後複製

希望本文所述對大家的jQuery程式設計有所幫助。