快捷導航

Jquery實現(xiàn)鼠標移動放大圖片功能實例

更新時間：2015年03月25日 12:12:28 作者：sheep921223

這篇文章主要介紹了Jquery實現(xiàn)鼠標移動放大圖片功能,實例分析了jQuery操作鼠標與圖片的技巧,非常具有實用價值,需要的朋友可以參考下

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

做畢業(yè)設(shè)計，老師看完小樣后，嫌棄我購物車里商品圖片太大，不美觀，讓美化個效果。上網(wǎng)查查代碼，修改了一個簡單版的。

使用的是jquery，未使用JavaScript獲取鼠標狀態(tài)，這主要和JavaScript需在標簽本身內(nèi)含寫出所調(diào)用到的動作，太麻煩了，一會就把自己搞糊涂了，使用jquery技術(shù)直接根據(jù)標簽的id，class等等，就可以辨識出來觸發(fā)條件，直接作出回應(yīng)(百度百科上說這是jquery很大的一個優(yōu)勢，不用再在html里面插入一堆js來調(diào)用命令，只需要定義id即可)。

使用這個技術(shù)的目的是為了實現(xiàn)在購物車內(nèi)閱覽貨物時，只需要顯示小圖，當鼠標滑過時顯示大圖。主要是為了提高用戶體驗，否則在購物車大圖顯示商品信息會直接影響整個網(wǎng)頁的美觀性。

實現(xiàn)出來的樣子就是這樣。

源碼：

<!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"));
/*將當前所有匹配元素追加到指定元素內(nèi)部的末尾位置。*/ 
} 
}).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"> 
    數(shù)量 
  </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程序設(shè)計有所幫助。

您可能感興趣的文章: