집 >웹 프론트엔드 >JS 튜토리얼 >Jquery는 마우스 움직임을 구현하여 그림 기능을 확대합니다. example_jquery

Jquery는 마우스 움직임을 구현하여 그림 기능을 확대합니다. example_jquery

WBOY원래의: 2016-05-16 16:07:421214검색

이 기사의 예에서는 Jquery가 마우스를 움직여 사진을 확대하는 기능을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

졸업 과제를 하던 중 선생님께서 샘플을 보시고 장바구니에 담은 제품의 사진이 너무 크고 보기 흉하다고 생각하셔서 예쁘게 꾸며달라고 하셨어요. 온라인으로 코드를 확인하고 간단한 버전을 수정했습니다.

jquery를 사용하는데, JavaScript는 태그 자체에 호출된 액션을 작성해야 하기 때문에 jquery 기술을 사용하는 것이 너무 번거롭습니다. 직접 태그의 id, 클래스 등에 따라 트리거 조건을 식별하고 직접 응답을 할 수 있습니다. (바이두 백과사전에서는 이것이 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 프로그래밍에 도움이 되기를 바랍니다.

성명：

이전 기사：jQuery는 post 메소드를 사용하여 데이터를 제출합니다.다음 기사：jQuery는 post 메소드를 사용하여 데이터를 제출합니다.

Jquery는 마우스 움직임을 구현하여 그림 기능을 확대합니다. example_jquery

관련 기사