快捷導(dǎo)航

Jquery實(shí)現(xiàn)鼠標(biāo)移動(dòng)放大圖片功能實(shí)例

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

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

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

做畢業(yè)設(shè)計(jì)，老師看完小樣后，嫌棄我購(gòu)物車?yán)锷唐穲D片太大，不美觀，讓美化個(gè)效果。上網(wǎng)查查代碼，修改了一個(gè)簡(jiǎn)單版的。

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

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

實(shí)現(xiàn)出來(lái)的樣子就是這樣。

源碼：

<!DOCTYPE HTML> 
<html> 
<head> 
<title>cart</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- 要把jquery-1.9.1.min.js導(dǎo)進(jìn)去，不導(dǎo)出不來(lái) --> 
<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"));
/*將當(dāng)前所有匹配元素追加到指定元素內(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"> 
    價(jià)格 
  </td> 
  <td style="WIDTH: 250px"> 
    小計(jì) 
  </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">總計(jì):</span> 元
  </td> 
   </tr> 
 </tbody> 
</table> 
</body> 
</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: