Jquery は画像を拡大するためのマウス移動関数を実装します example

Jquery は画像を拡大するためのマウス移動関数を実装します example_jquery

WBOY

リリース： 2016-05-16 16:07:42

オリジナル

1202 人が閲覧しました

この記事の例では、Jquery がマウスを動かして写真を拡大する機能を実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

私が卒業制作をしていたとき、先生がサンプルを見た後、ショッピングカートに入っている商品の写真が大きすぎて見苦しいと思い、美化するように言われました。コードをオンラインで確認し、簡単なバージョンを修正しました。

マウスのステータスを取得するために JavaScript を使用しないのは、主に JavaScript が呼び出されたアクションをタグ自体に記述する必要があるためです。タグの ID やクラスなどに応じて、トリガー条件を特定し、直接応答することができます (Baidu Encyclopedia によれば、これは jquery の大きな利点です。html に大量の js を挿入する必要はなくなります)コマンドを呼び出すには、ID を定義するだけです (それだけです)。

この技術を使用する目的は、ショッピングカート内の商品を閲覧するときに小さな画像のみを表示し、マウスをロールオーバーすると大きな画像を表示することです。主な目的はユーザーエクスペリエンスを向上させることですが、そうでない場合、ショッピングカートの大きな画像に製品情報を表示すると、Web ページ全体の美しさに直接影響します。

実装するとこんな感じです。

ソースコード:

<!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 プログラミングに役立つことを願っています。