前端编程之页面放大镜功能的实现
2018-04-24 15:20
393 查看
淘过宝的都知道,有些网站需要对商品进行放大镜功能,也就是当鼠标移动到商品上面时,会在旁边出现细节的放大效果,这对于一些商城类网站来说,是一定需要具备的,那么页面放大镜功能是如何来实现的呢?下面就跟大家分享一下。
实现代码:
<style>
html,body{
margin: 0;
padding: 0;
}
.main{
width: 1200px;
margin: 100px auto 0;
display: flex;
}
.box{
width: 400px;
height: 500px;
position: relative;
border: 1px solid red;
display: flex;
flex-flow: column;
justify-content: space-between;
padding: 5px;
}
.box_top{
width: 400px;
height: 400px;
display: flex;
</head>
<body>
<main>
<div class="main">
<div class="box">
<div class="box_top">
<div class="box_top_left">
<div class="box_top_left_999"></div>
<div class="box_top_left_99"></div>
<img src="imgs/timg.jpg" alt="">
</div>
<div class="box_top_right">
<img src="imgs/timg.jpg" alt="">
</div>
</div>
<div class="box_bottom">
<img src="imgs/timg.jpg" alt="">
<img src="imgs/b.jpg" alt="">
<img src="imgs/c.jpg" alt="">
<img src="imgs/d.jpg" alt="">
</div>
</div>
</div>
</main>
<script>
$(".box_bottom img").each(function(){
$(this).mouseover(function(){
$(".box_top_left img").attr("src",$(this).attr("src"))
$(".box_top_right img").attr("src",$(this).attr("src"))
})
})
$(".box_top_left_999").mousemove(function(e){
var top = e.pageY;
var left = e.pageX;
好了,相信看到这里大家都知道该如何去做了,那么现在可以保存查看一下效果了,如果没有做出放大镜效果的程序员也不需要灰心,可以在下方留言询问,或者跟其他人互动来解决都是可以的。
本文由专业的app开发燚轩科技整理发布,如需转载请注明原文作者及出处!
实现代码:
<style>
html,body{
margin: 0;
padding: 0;
}
.main{
width: 1200px;
margin: 100px auto 0;
display: flex;
}
.box{
width: 400px;
height: 500px;
position: relative;
border: 1px solid red;
display: flex;
flex-flow: column;
justify-content: space-between;
padding: 5px;
}
.box_top{
width: 400px;
height: 400px;
display: flex;
position: relative; border: 1px solid green; } .box_top_left{ width: 400px; height: 400px; position: relative; } .box_top_left_999{ width: 100%; height: 100%; position: absolute; z-index: 999; } .box_top_left_99{ width: 200px; height: 200px; position: absolute; z-index: 99; background-color: rgb(81, 223, 255); opacity: 0.5; display: none; } .box_top_left img{ width: 100%; height: 100%; } .box_top_right{ width: 400px; height: 400px; overflow: hidden; position: absolute; left: 500px; border: 1px solid red; display: none; } .box_top_right img{ width: 800px; height: 800px; position: relative; display: block; } .box_bottom{ width: 400px; height: 80px; display: flex; align-items: center; border: 1px solid blue; padding: 1% 0; } .box_bottom img{ width: 23%; height: 100%; margin: 0 1%; } </style>
</head>
<body>
<main>
<div class="main">
<div class="box">
<div class="box_top">
<div class="box_top_left">
<div class="box_top_left_999"></div>
<div class="box_top_left_99"></div>
<img src="imgs/timg.jpg" alt="">
</div>
<div class="box_top_right">
<img src="imgs/timg.jpg" alt="">
</div>
</div>
<div class="box_bottom">
<img src="imgs/timg.jpg" alt="">
<img src="imgs/b.jpg" alt="">
<img src="imgs/c.jpg" alt="">
<img src="imgs/d.jpg" alt="">
</div>
</div>
</div>
</main>
<script>
$(".box_bottom img").each(function(){
$(this).mouseover(function(){
$(".box_top_left img").attr("src",$(this).attr("src"))
$(".box_top_right img").attr("src",$(this).attr("src"))
})
})
$(".box_top_left_999").mousemove(function(e){
var top = e.pageY;
var left = e.pageX;
$(".box_top_left_99").css("display","block") $(".box_top_right").css("display","block") var new_left_x = $(this).offset().left+100; var new_left_d = $(this).offset().left+300; var img_left = left - new_left_x img_left = -img_left img_left = img_left*2 if( left > new_left_x){ if(left < new_left_d){ $(".box_top_left_99").css("left",left - new_left_x) $(".box_top_right img").css("left",img_left) }else{ $(".box_top_left_99").css("left",200) $(".box_top_right img").css("left",-400) } }else{ $(".box_top_left_99").css("left",0) $(".box_top_right img").css("left",0) } var new_top_x = $(this).offset().top+100; var new_top_d = $(this).offset().top+300; var img_top = top - new_top_x img_top = -img_top img_top = img_top*2 if(new_top_x < top){ if(new_top_d>top){ $(".box_top_left_99").css("top",top - new_top_x) $(".box_top_right img").css("top",img_top) }else{ $(".box_top_left_99").css("top",200) $(".box_top_right img").css("top",-400) } }else{ $(".box_top_left_99").css("top",0) $(".box_top_right img").css("top",0) } }).mouseout(function(){ $(".box_top_left_99").css("display","none") $(".box_top_right").css("display","none") }) </script>
好了,相信看到这里大家都知道该如何去做了,那么现在可以保存查看一下效果了,如果没有做出放大镜效果的程序员也不需要灰心,可以在下方留言询问,或者跟其他人互动来解决都是可以的。
本文由专业的app开发燚轩科技整理发布,如需转载请注明原文作者及出处!
相关文章推荐
- <web前端>web开发实现详情页面放大镜功效
- IE 前端页面实现语音播报功能
- js获取前端时间方法,并且实现定时刷新页面的功能
- 权限设置页面之间PK用户体验(功能是否合理?操作是否方便?编程实现是否简单?)
- 前端提示“页面正在载入”的功能实现
- 前端通过Ajax请求从后台返回数据到页面显示,实现分页功能
- jsp、struts、spring、mybatis实现前端页面功能模块化拆分
- JS实现前端页面的搜索功能
- jsp、struts、spring、mybatis实现前端页面功能模块化拆分
- 利用imgateaselect插件实现前端页面图片截取功能
- input 点击放大镜背景搜索、jQuery实现简单前端搜索功能
- 首次跟前端搭配开发——活动页面分享功能实现
- jsp、struts、spring、mybatis实现前端页面功能模块化拆分的方案
- js+html+css实现简单页面交互功能(2015知乎前端笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
- 权限设置页面之间PK用户体验(功能是否合理?操作是否方便?编程实现是否简单?)
- JavaScript实现离开页面前提示功能【附jQuery实现方法】
- 用javascript来实现页面的换肤功能
- 根据其他页面传递不同参数实现功能与效果
- Android编程实现显示在标题上的进度条功能【附源码下载】
- 帝国CMS首页及其它自定义页面调用信息实现分页功能