This is my native JS write Magnifier effect, compared with a variety of framework technology, I like to use the native JS, here, want to talk with you about the native and framework technology understanding and personal preferences.
<! DOCTYPE html>
<title>js Magnifier Effect </title>
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<style>
*{
margin:0px;
padding:0px;
Border:none;
List-style:none;
}
#box {
margin:80px Auto;
width:352px;
}
#box P
{
width:350px;
height:350px;
border:1px solid #ddd;
margin-bottom:5px;
}
#box p img
{
width:350px;
height:350px;
}
#box H1
{
width:352px;
height:54px;
Overflow:hidden;
position:relative;
}
#box H1 Div
{
width:310px;
height:54px;
margin:0px Auto;
position:relative;
}
#box H1 Div ul
{
Position:absolute;
left:0px;
top:0px;
}
#box H1 ul Li
{
width:62px;
Float:left;
}
#box H1 ul li img
{
width:50px;
height:50px;
padding:1px;
border:1px solid #CECFCE;
}
#box H1 img.hoveredthumb{
border:2px solid #e4393c;
padding:0;
}
/* Medium-sized picture display area */
p#medimgbox{
position:relative;
}
#jing {
Position:absolute;
left:0;
top:0;
width:175px;
height:175px;
border-radius:50%;
Background: #ffd;
opacity:0.7;
Display:none;
}
/* Hangs at the top of the picture/jing dedicated to receiving mouse movement events
A completely transparent layer */
#medImgBox #mian {
Display:block;
Position:absolute;
width:100%;
height:100%;
top:0;
left:0;
Cursor:move;
opacity:0;
}
/**
Large Map Display Area
**/
#largeImgBox {
Position:absolute;
width:175px;
height:175px;
border-radius:50%;
border:1px solid #faa;
top:0px;
left:352px;
Overflow:hidden;
Display:none;
}
#largeImg {
Display:none;
Position:absolute;
}
</style>
<body >
<div id= "box" >
<p id= "Medimgbox" >
<span id= "Jing" ></span>
<span id= "Mian" ></span>
<span id= "Largeimgbox" >
</span>
</p>
<div>
<ul id= "List" >
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
var imglist = Document.queryselectorall (' #box ul li img ');
for (var i=0; i var img = imglist[i];
Img.onmouseover = changethumbimg;
}
Function changethumbimg () {
var previoushovered = Document.queryselector ('. Hoveredthumb ');
if (previoushovered==null) {
This.classname = ' hoveredthumb ';
Changemediumimg (THIS.SRC);//Modify the SRC
}else if (previoushovered!=this) {
Previoushovered.removeattribute (' class ');
This.classname = ' hoveredthumb ';
Changemediumimg (THIS.SRC);//Modify the medium image's SRC
}
}
function changemediumimg (thumbsrc) {
var dotindex = Thumbsrc.lastindexof ('. ');
var prefix = thumbsrc.substring (0, Dotindex);
var suffix = thumbsrc.substring (dotindex);
var mediumsrc = prefix + '-m ' +suffix;
document.getElementById (' mediumimg '). src = mediumsrc;
}
/**
Add a mouse move event for Magnifier Jing
**/
Document.queryselector (' #mian '). onmousemove =
function (event) {
var x = offset of the event.offsetx;//event relative to the event source
var y = event.offsety;
var jing = document.getElementById (' Jing ');
var w = jing.offsetwidth; Jing Width and height
var h = jing.offsetheight;
var left = X<w/2? 0: (X-W/2);
var top = Y
if (x> (W*2-W/2)) {
left = w*2-w;
}
if (y> (H*2-H/2)) {
top = h*2-h;
}
Jing.style.left = left+ ' px ';
Jing.style.top = top+ ' px ';
//Modify the position of the large image/
var largeimg = document.getElementById (' largeimg ');
LargeImg.style.left = (-left*largeimg.width/350) + ' px ';
LargeImg.style.top = (-top*largeimg.height/350) + ' px ';
}
Document.queryselector (' #mian '). onmouseover = function () {
//Display Jing
var jing = document.getElementById (' Jing ');
Jing.style.display = ' block ';
var largeimgbox = document.getElementById (' Largeimgbox ');
LargeImgBox.style.display = ' block ';
Gets the src of the large image currently being displayed
var src = document.queryselector (' #mediumImg '). Src;
var dotindex = Src.lastindexof ('. ');
var prefix = src.substring (0, dotIndex-2);
var suffix = src.substring (dotindex);
src = prefix + '-l ' + suffix;
var largeimg = document.getElementById (' largeimg ');
LARGEIMG.SRC = src;
largeimg.style.display= ' block ';
}
Document.queryselector (' #mian '). onmouseout =
function () {
Remove Jing
var jing = document.getElementById (' Jing ');
Jing.style.display = ' None ';
Remove large image display area
document.getElementById (' Largeimgbox '). style.display = ' None ';
}
</script>
</body>
Native JS-Implemented Magnifier effect