JavaScript仿淘宝放大镜效果
本文实例为大家分享了JavaScript实现淘宝放大镜效果的具体代码，供大家参考，具体内容如下
html代码
<div class="thumbnail">
<img src="./img/12-1Z930152149 (2).jpg" alt="">
<div class="magnifier"></div>
</div>
<div class="original">
<img src="./img/12-1Z930152149 (2).jpg" alt="">
</div>
<script src="./index.js"></script>
css代码
*{
margin: 0;
padding: 0;
}
.thumbnail , .original{
width: 400px;
height: 400px;
border: 1px solid red;
position: absolute;
}
.original{
left: 450px;
overflow: hidden;
display: none;
}
.thumbnail>img{
width: 400px;
}
.original>img{
width: 800px;
position: absolute;
}
.magnifier{
cursor: move;
width: 200px;
height: 200px;
background-color:rgba(206, 198, 198, 0.5);
position: absolute;
top: 0;
left: 0;
display: none;
}
js代码
// thumbnail 缩略图
// original 原图
// magnifier 放大镜
$(".thumbnail").mouseover(function(){
$(".magnifier").show()
$(".original").show()
})
$(".thumbnail").mousemove(function(ev){
// console.log(ev)
// 鼠标相对页面 x y 坐标
var mx= ev.pageX;
var my =ev.pageY;
var tx = mx - $(".thumbnail").offset().left
var ty = my - $(".thumbnail").offset().top
var l = tx -$(".magnifier").width()/2;
var t = ty -$(".magnifier").height()/2;
var maxX= $(".thumbnail").width() - $(".magnifier").width();
var maxY= $(".thumbnail").height() -$(".magnifier").height()
// 处理边界
if( l >maxX){
l = maxX
}
if( t >maxY){
t = maxY
}
if(l <0){
l =0
}
if(t<0){
t=0
}
//放大镜位置
$(".magnifier").css({
left: l +"px",
top : t + "px"
})
//原图位置
$(".original >img").css({
left:-l*2 +"px",
top:-t*2 +"px"
})
})
// 鼠标离开 隐藏 放大镜 ，原图
$(".thumbnail").mouseout(function(){
$(".magnifier").hide();
$(".original").hide();
})
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现放大镜详细
目录 1.效果图 2.实现原理 3.总结 1.效果图 2.实现原理 借助宽高等比例放大的两张图片,结合js中鼠标偏移量.元素偏移量.元素自身宽高等属性完成:左侧遮罩移动Xpx,右侧大图移动X*倍数px:其余部分就是用小学数学算一下就OK了. HTML和CSS: <divclass="wrap"> <!-- 小图与遮罩 --> <div id="small"> <img src="img/1.jpg" al
-
JavaScript面向对象实现放大镜案例
本文实例为大家分享了JavaScript面向对象实现放大镜的具体代码,供大家参考,具体内容如下 效果图 实现原理分析 如图所示 触发鼠标的移动事件时,根据事件对象的 clientX 和 clientY 属性得到实时的坐标点 x 和 y 值 ,减去 small_box 的 offsetLeft 值 和 cutting_box 的宽度的一半 ,可以得到 cutting_box 的偏移量 left 值,top值同理.当 cutting_box 到达右侧和下侧时,left 和 top 取得最大值.用 实
-
Javascript实例项目放大镜特效的实现流程
目录 前言 案例:仿京东放大镜效果 offset系列 client系列 scroll系列 三大系列总结 前言 本票博客主要是放大镜案例,里面涉及到的知识点会提出来,可放心食用~后有源代码. 案例:仿京东放大镜效果 效果见下图: 功能要求: 当鼠标移动到小图片上时,遮罩层出现,同时旁边大图片也出现,鼠标移出,遮罩层消失,大图片也消失. 遮罩层只能在小盒内子移动,不能超出. 遮罩层在小盒子内移动,大图片显示对应的板块. 案例分析: 元素的隐层和显示 遮罩层的移动范围用offset计算 计算出大盒子内
-
JavaScript实现放大镜效果
本文实例为大家分享了JavaScript实现放大镜效果的具体代码,供大家参考,具体内容如下 这次实现的效果如下: 这次的案例稍微有一点难度,在css和js上都需要多加思考,话不多说,让我们来开始吧~ 1.首先我们需要使用html和css规划好整体的布局,即两个相邻的盒子A和B,左边的盒子A中还有一个小盒子S.为了实现相邻,我采用的方法是为其均设置position:absolute ,然后设置left和top的值来使其相邻. 小盒子S我们同样可以为其设置position:absolute,调整一下
-
JavaScript仿京东放大镜特效
本文实例为大家分享了JavaScript仿京东放大镜的具体代码,供大家参考,具体内容如下 功能需求: 1.分为三个模块 2.鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开隐藏两个盒子功能 3.黄色的遮挡层跟随着鼠标移动 4.移动黄色遮挡层,大图片跟随着移动 大图片移动距离=(遮挡层移动距离*大图片最大移动距离)/ 遮挡层最大移动距离 <style> body, div { margin: 0; padding: 0; } .product { position: relative; w
-
javaScript实现放大镜特效
要实现的效果:鼠标放到小图片上小图片上方会出现一个小块,这个小块里面的区域会放大显示到右边大图里面(如下图所示) 这个效果主要用到的是:鼠标的坐标e.clientX,e.clientY,偏移量offsetLeft,offsetTop,offsetWidth,sffsetHeight等属性. HTML和CSS代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&
-
JavaScript仿京东放大镜效果
本文实例为大家分享了JavaScript实现京东放大镜效果的具体代码,供大家参考,具体内容如下 案例分析 整个案例可以分为三个功能模块 鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能 黄色的遮挡层跟随鼠标功能. 移动黄色遮挡层,大图片跟随移动功能. 鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能 就是显示与隐藏 移动黄色遮挡层,大图片跟随移动功能,大图片的移动距离要跟黄色遮挡层的比例相等. 求大图片的移动距离公式 代码 <!DOCTYP
-
js实现放大镜效果的思路与代码
本文实例为大家分享了js实现放大镜效果的具体代码,供大家参考,具体内容如下 样式展示: 思路 先准备两张图片,一张小图,一张大图,并且两张图片有一个整数比值 在小图片的上方设置一个放大镜样式,背景设为透明色即可 大图片外边套一个父元素,超出父元素隐藏,大小为只能容纳你的放大部分即可 父元素与放大镜样式的比值=大图与小图的比值 在小图片上进行鼠标移动时获取鼠标的坐标,得到鼠标当前处于小图片上的坐标 根据对应的比例求出大图片的坐标并移动大图片令放大部分处于父元素可见范围 代码 1.html部分 <d
-
JavaScript仿淘宝放大镜效果
本文实例为大家分享了JavaScript实现淘宝放大镜效果的具体代码,供大家参考,具体内容如下 html代码 <div class="thumbnail"> <img src="./img/12-1Z930152149 (2).jpg" alt=""> <div class="magnifier"></div> </div> <div class="o
-
js仿淘宝放大镜效果
仿淘宝放大镜封装效果,供大家参考,具体内容如下 放大镜是做好了,但是没有下面小型导航无法选择放大图片,后期我会在封装出来的.由于考试当前 考完试我会在推出vue的放大效果.以下是代码: 1.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href
-
用js制作淘宝放大镜效果
本文实例为大家分享了js制作淘宝放大镜效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ width: 100%; height: 100%;
-
JavaScript仿淘宝实现固定右侧侧边栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
-
vue3实现淘宝放大镜效果的示例代码
目录 实现效果 实现思路 完成小图盒子.遮罩.大图盒子布局 实现鼠标移动到小图盒子显示遮罩和大图盒子 实现鼠标移动遮罩在小图盒子移动 完整代码 总结 实现效果 实现思路 我们实现动图的淘宝放大镜的效果需要4步. 1.完成小图盒子.遮罩.大图盒子布局2.实现鼠标移动到小图盒子显示遮罩和大图盒子3.实现鼠标移动遮罩在小图盒子移动4.实现遮罩的移动范围不能超出小图盒子,且移动时带动大图图片移动 完成小图盒子.遮罩.大图盒子布局 我的布局小图盒子包裹图片.遮罩.大图盒子.小图盒子为相对定位.遮罩.大图盒
-
原生js实现淘宝放大镜效果
大家经常逛淘宝.天猫.京东这类网站的时候往往会看到一些图片展示的效果,例如:把鼠标放在图片上右侧会出现一个放大的预览区域,这就是所谓放大镜效果.今天闲着没事干,就打算复习一下JavaScript基础,用一下基础知识制作一个类似于淘宝的放大镜效果. 先说一下这个效果需要用到的一些基础知识: css相对定位:position:absolute: 鼠标移入移出以及移动事件:onmouseover.onmouseout.onmousemove,记住这些事件一般不会单个出现 获取鼠标点击坐标:X轴:cli
-
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
淘宝图片处理讨论 淘宝网页面很大,但是打开速度很快.其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载.但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部. 模仿淘宝,做滚动图片加载 这里想到了三种方法: 1.javascript懒加载之可视区域加载 <!DOCTYPE h
-
原生js仿淘宝网商品放大镜效果
效果图:(实例图片由自己添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿淘宝放大镜特效</title> <style type="text/css"> *{margin: 0;padding: 0;} #demo{width:350px;height:
-
JS仿淘宝实现的简单滑动门效果代码
本文实例讲述了JS仿淘宝实现的简单滑动门效果代码.分享给大家供大家参考.具体如下: 这是一个简单的仿淘宝滑动门效果代码,个人感觉真的挺不错,以前有过一款和这个差不多.在滑动门里你可以再次布局你的网页,可以做成一个功能超强大的导航,原示例是一个拼音索引程序,改成菜单也是可以的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-simple-hdm-style-demo/ 具体代码如下: <!DOCTYPE html PUBL
-
JS实现的仿淘宝交易倒计时效果
本文实例讲述了JS实现的仿淘宝交易倒计时效果.分享给大家供大家参考,具体如下: <script type="text/javascript"> var StartTime = new Date("2015/11/11 12:34:03"); document.write("订购时间: " + StartTime.toLocaleDateString() + StartTime.toLocaleTimeString() + "