Jquery allows you to move and zoom in images.
This article mainly introduces Jquery's mouse movement and image enlargement function. It provides examples of jQuery's mouse and image operation skills, which are very useful. For more information, see
This document describes how to use Jquery to move and zoom in images. Share it with you for your reference. The specific analysis is as follows:
After finishing the graduation project, the teacher gave up my shopping cart because the product pictures were too big and not beautiful, so that they could be beautified. Check the code online and modify a simple version.
Jquery is used, and JavaScript is not used to get the mouse state. This is mainly because JavaScript needs to write the called action in the tag itself, which is too troublesome. In a moment, I will be confused, using jquery technology, you can identify the trigger conditions and respond directly based on the tag id, class, and so on (Baidu encyclopedia said this is a great advantage of jquery, you don't need to insert a bunch of js Code in html to call the command. You just need to define the id ).
The purpose of this technology is to display a small image when reading the goods in the shopping cart. The main purpose is to improve the user experience. Otherwise, the product information displayed in the big picture of the shopping cart will directly affect the aesthetics of the entire web page.
This is how it is implemented.
Source code:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<! Doctype html> <Html> <Head> <Title> cart </title> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <! -- To import the jquery-1.9.1.min.js, do not export the terminal --> <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 implements targetmediaworkflow (event.tar get ); If ($ target. is ('img ')) { $ (" "Height": size, "Width": size, }). AppendTo ($ ("# imgtest ")); /* Append all matching elements to the end of the specified element. */ } }). Mouseout (function (){ $ ("# Tip"). remove ();/* remove element */ }) }) </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"> Product Name </Td> <Td style = "WIDTH: 60px"> Image </Td> <Td style = "WIDTH: 170px"> Quantity </Td> <Td style = "WIDTH: 170px"> Price </Td> <Td style = "WIDTH: 250px"> Subtotal </Td> </Thead> <Tbody> <Td class = "name"> </td> <Td class = "image"> </Td> <Td class = "quantity"> </td> <Td class = "price"> </td> <Td class = "total"> RMB </td> </Tr> <Tr> <Td colspan = "4" class = "cart_total"> <Br> </td> <Td> <Span class = "red"> total: </span> RMB </Td> </Tr> </Tbody> </Table> </Body> </Html> |
I hope this article will help you with jQuery programming.