jQery放大镜效果
2024-10-18 14:46:41
简单2:1的放大
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
display: block;
}
#pic{
width: 200px;
height: 160px;
border: 3px solid #ccc;
position: relative;
float: left;
}
#pic img{
width: 200px;
height: 160px;
}
.mirror{
width: 100px;
height: 80px;
background: gold;
opacity: .5;
position: absolute;
left: 0;
top: 0;
display: none;
}
#bigbox{
width: 200px;
height: 160px;
float: left;
border: 3px solid #ccc;
overflow: hidden;
position: relative;
}
#bigbox img{
position: absolute;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#pic').on({
mousemove:function(e){
$('.mirror').css('display','block')
//获取当前鼠标按下的位置相对于box的偏移值
var _left = e.clientX - $('#pic').offset().left - $('.mirror').width()/2;
var _top = e.clientY - $('#pic').offset().top - $('.mirror').height()/2;
//判断不能超出边界
if(_left<0){
_left = 0
}
if(_left>=$('#pic').width() - $('.mirror').width()){
_left=$('#pic').width() - $('.mirror').width()
}
if(_top<0){
_top = 0
}
if(_top>=$('#pic').height() - $('.mirror').height()){
_top = $('#pic').height() - $('.mirror').height()
}
//在box中移动鼠标，改变放大镜的位置
($('.mirror')).css({'left':_left,'top':_top})
//根据放大镜的位置，算出右侧大图应该显示的部分
$('#img1').css({'left':-$('.mirror').position().left * 2,'top':-$('.mirror').position().top * 2})
},
//鼠标移出后，放大镜隐藏
mouseleave:function(){
$('.mirror').css('display','none') }
})
})
</script>
</head>
<body>
<div id="box">
<div id="pic">
<img src="img/6.jpg"/>
<p class="mirror"></p>
</div>
<div id="bigbox">
<img id="img1" src="img/6.jpg"/>
</div>
</div>
</body>
</html>
最新文章
- 简约而不简单的Django新手图文教程
- linux清理内存命令
- wexinjs 调用
- 单个input框上传多个文件操作
- 设置 ubuntu ftp
- 事件流处理框架NEsper for .NET z
- Android 应用页面延缓载入
- Java---实现运行任意目录下class中加了@MyTest的空参方法(实现图形界面)
- SQL Server DML（SELECT）常见用法（二）
- CQRS
- iOS回顾笔记（09） -- Cell的添加、删除、更新、批量操作
- WebService应用--使用java开发WebService程序
- Neutron控制节点集群
- java上传图片剪切工具类
- Docker系列（四）Centos6.5 搭建私人镜像仓库 v2
- jQuery的each使用陷阱
- java内部类（一）
- ceph S3客户端操作--s3cmd
- HDU-2874-森林求LCA/tarjan
- idea-plugin