原生js仿写京东放大图

原生js写出模拟京东放大图

// An highlighted block
<!OCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;}.photo{width: 250px;height: 300px;position:absolute;top: 10%;left: 20%;}.box{left: 100px;top: 100px;position: relative;width: 400px;height: 400px;background: #cccccc;border: 1px solid #000;}.big{width: 800px;height: 800px;top:0;left:10px;position: absolute;}.bigbox{width: 400px;height: 450px;/* background: cornflowerblue; */position: absolute;left: 410px;top: 0;border: 1px solid #000;display: none;overflow: hidden;}.jingzi{width: 150px;height: 150px;background: rgb(158, 192, 89);opacity: .5;cursor: move;display: none;position: absolute;}</style>
</head>
<body><div class="box"><img src="img/6.jpg" class="photo"><div class="jingzi"></div><div class="bigbox"><img src="img/6.jpg" class="big"></div></div><script>var box=document.querySelector('.box');var photo=document.querySelector('.photo');var jingzi=document.querySelector('.jingzi');var bigbox=document.querySelector('.bigbox');box.addEventListener('mouseover',function(){// 鼠标经过显示放大框 和遮挡层jingzi.style.display='block';bigbox.style.display='block';});box.addEventListener('mouseout',function(){// 鼠标离开隐藏jingzi.style.display='none';bigbox.style.display='none';});box.addEventListener('mousemove',function(e){// 获得鼠标在照片框里的位置 因为遮挡层只在框里运动var x=e.pageX-box.offsetLef;var y=e.pageY-box.offsetTop;// 遮挡层 距离左边和上边的距离 // jingzi.offsetHeight/2// jingzi.offsetWidth/2 这俩句是让鼠标始终在遮挡层中间// jingziX ，jingziY 是当前距离盒子左边和上面的距离var jingziX=x-jingzi.offsetWidth/2; var jingziY=y-jingzi.offsetHeight/2;// 遮挡层的最大移动距离XjingziXMax=box.offsetWidth-jingzi.offsetWidth;jingziYMax=box.offsetHeight-jingzi.offsetHeight;// 遮盖层超出左边的边界 就至零if(jingziX<=0){jingziX=0;}// 超出左边 赋值 最大值if(jingziX>= jingziXMax){jingziX= jingziXMax;}// (jingziX<=0)?jingziX=0:jingziX=box. jingziXMax;三元运算符// 遮盖层超出上边的边界 就至零if(jingziY<=0){jingziY=0;}if(jingziY>=jingziYMax){jingziY=jingziYMax;}// (jingziY<=0)?jingziY=0:jingziY=box.offsetHeight-jingzi.offsetHeight;//判断完毕 将值赋给遮盖层jingzi.style.left=jingziX+'px'jingzi.style.top=jingziY +'px';//  获取大照片var bigphoto=document.querySelector('.big');//  最大的移动距离var big_move_x=bigphoto.offsetWidth-bigbox.offsetWidth;var big_move_y=bigphoto.offsetHeight-bigbox.offsetHeight;//  大照片的移动的距离与小棕照片成比例 算法：//  遮盖层的移动距离/遮盖层的最大移动距离=大照片的移动距离/最大移动距离 // 换算即可得出 大照片的移动距离var bigX=jingziX*big_move_x/jingziXMax;var bigY=jingziY*big_move_y/jingziYMax;// 赋值bigphoto.style.left=-bigX +'px';bigphoto.style.top=-bigY+'px';});</script>
</body>
</html>

原生js仿写京东放大图相关推荐

使用原生js仿写win10时钟
学习web前端已经一月了,突然就像做一点什么,于是就仿写了一个win10时钟(农历计算准确度太差,于是就忽略不写了~~) 一.HTML布局 1 <div class="wrap&quo ...
原生JS仿写手机指南针（带水平仪）
历时半年整理出了十多万字的学习笔记,目前依旧在更新欢迎点赞和支持-
【每日一练】原生js仿淘宝主图放大镜功能，附学习源码
在我们的项目中,经常会遇到各种功能效果的实现,对于每一项功能的实现方式,都有很多种,这些实现方式没有好坏之分,只有适合与否,但是我个人建议,如果项目急就选择自己擅长的方式实现,比较完成工作更加重要嘛. ...
HTML+CSS 仿写京东网站界面
在学习了HTML和CSS以后,用俩天的时间仿写京东网站的部分界面,基本将之前学习的内容都应用到了,收货颇多,也对网站的布局有了更深的认识. 总结整体的布局在开始写网站之前,要考虑整体的布局,事先将 ...
用原生js+html写一个像素鸟游戏
前言: 用html+js+css写一个面向对象板的像素鸟游戏看一下效果把: 游戏需引用的图片:(右键保存图片) bird.png land.png pipeDown.png pipeUp.png s ...
【原生JS】写滚动指定位置展示动画
用原生js做滚动到指定位置展示动画,动画效果用Animate.css 直接上代码 <!DOCTYPE html> <html lang="en"><h ...
HTML+CSS仿写京东登陆页面附代码（web前端期末大作业）
cc 本来想加上JS实现选项卡功能的,奈何本人水平实在有限,用JavaScript用到一半就放弃了,真的不会使用啊!!!给你们看看效果吧. 整体布局个人认为我这个整体布局还是比较科学的,把这个界面分 ...
快速仿写京东、天猫下拉刷新
好久没输出文章了,最近研发任务比较忙,果然计划赶不上变化,之前还希望能一周一输出,好吧,我还是承认自己比较懒好了,=.=## 这次跟大家分享一下下拉刷新,之前我们的公司的项目一直都是使用SwipeRe ...
HTML+CSS仿写京东页面附代码（web前端大作业）
学习前端时间不多,看了两晚上就开始赶实训作业,大家看看就行先来看看效果: <!DOCTYPE html> <html lang="en"> <hea ...

原生js仿写京东放大图

原生js写出模拟京东放大图

原生js仿写京东放大图相关推荐

最新文章

热门文章