Jquery implements mouse movement to enlarge picture function example

Jquery implements mouse movement to enlarge picture function example_jquery

WBOY

Release： 2016-05-16 16:07:42

Original

1203 people have browsed it

The example in this article describes how Jquery implements the function of zooming in on pictures by moving the mouse. Share it with everyone for your reference. The specific analysis is as follows:

When I was doing my graduation project, after the teacher saw the sample, he thought the pictures of the products in my shopping cart were too big and unsightly, so he asked me to beautify them. I checked the code online and modified a simple version.

jquery is used, and JavaScript is not used to obtain the mouse status. This is mainly because JavaScript needs to write the called action in the tag itself. It is too troublesome. I will get confused in a while. Use jquery technology directly According to the tag's id, class, etc., the trigger condition can be identified and a direct response can be made (Baidu Encyclopedia says this is a great advantage of jquery. You no longer need to insert a bunch of js into the html to call the command, you only need to define the id That’s it).

The purpose of using this technology is to display only small images when browsing goods in the shopping cart, and display large images when the mouse rolls over. The main purpose is to improve user experience, otherwise displaying product information in a large image of the shopping cart will directly affect the aesthetics of the entire web page.

This is what it looks like when implemented.

Source code:

<!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>

Copy after login

I hope this article will be helpful to everyone’s jQuery programming.