Home > Developer > JavaScript
1<! DOCTYPE html>23 45<meta charset= "UTF-8" >6<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >7<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >8<title>Document</title>9<style>Ten #big { One width:400px; A height:400px; - border:1px solid black; - Overflow:hidden; the Display:none; - Position:absolute; -background-Color:white; -Background-image:url ('./image/1.bmp ')); +opacity:0.8; - } + A #small { at width:350px; - height:350px; - border:1px solid black; -Background-image:url ('./image/11.bmp ')); - } - in #img { - width:800px; to height:800px; + } - the #div { * width:175px; $ height:175px;Panax Notoginsengbackground-Color:blue; -opacity:0.5; the Position:absolute; + Display:none; A } the</style> + - $<body> $ -<div id= "small" > -<div id= "Div" ></div> the<!---- -</div>Wuyi<div id= "img" > the<div id= "Big" > -<!---- Wu</div> -</div> About<script src= "./jquery-1.12.4.min.js" ></script> $<script> - //actions when the mouse moves over the picture -$ (window). On (' Load ',function () { -$ ("#small"). On (' MouseEnter ',function () { ALet position = $ ( This). Position ();//Get small offset +$ ("#big"). CSS ({//The distance from the small picture of the large picture the Top:position.top, -Left:position.left + $ ( This). Width () + 80 $ }). Show (); the }) the the$ ("#small"). On (' MouseMove ',function(e) {//move the mouse over the picture theLet Left1 =e.pagex-$ ( This). Offset (). Left; -Let top1=e.pagey-$ ( This). Offset (). Top; inLeft1=left1-80<0?90: left1; theTop1=top1-80<0?90: TOP1; theleft1=left1-80>175?263: left1; Abouttop1=top1-80>175?263: TOP1; the$ (' #div '). CSS ({//Small Square Display theDisplay: "Block", theLeft:left1-80, +Top:top1-80 - }) the BayiLet position = $ ( This). Position (); the //First Kind the //calculates the offset coordinates of the mouse over the picture - //Let X = E.pagex-position.left; - //Let Y = e.pagey-position.top; the ////Distance to position Magnifier the //$ ("#big"). ScrollTop (Y-100). ScrollLeft (X-100); the the ////second type -Let x =$ ("#div"). Position (). left/350*800; theLet y =$ ("#div"). Position (). top/350*800; the$ ("#big"). css ({ thebackgroundposition: '-${x}px-${y}px '94 }) the the the });98$ ("#small"). On (' MouseLeave ',function() {//when the mouse moves out About$ ("#big"). css ({ -Display: "None"101 })102$ (' #div '). CSS ({//Small Square Display103Display: "None",104 the })106 })107 108 //Console.log ($.unique ($.merge ([1,2],[2,3,4] ))109 }) the</script>111</body> the 113Writing magnifier effects with jquery in JavaScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
