内容简介：jquery实现放大镜简洁代码
简介
网上有许多放大镜的jquery的插件，但是用着不是那么得心应手，现在一页代码实现一个放大镜功能，如果需要附加的功能可以手动修改，原理都在注释里
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.small {
margin-left:40px;
margin-top:50px;
width: 150px;
height: 150px;
/*border: 2px solid yellow;*/
}
.small>img {
width: 150px;
height: 150px;
}
.slider {
width: 50px;
height: 50px;
background: rgba(180,180,135,0.3);
position: absolute;
display: none;
}
#big {
//设置为固定大小;
width: 200px;
height: 200px;
position: absolute;
/* border: 2px solid red;*/
overflow: hidden;
display: none;
}
</style>
</head>
<body>
<!--缩略图-->
<div class="small">
<img src="thumb.jpg" />
<!--放大镜,在原图不上的小块-->
<div class="slider"></div>
</div>
<!--放大镜区域，大图，设置为none隐藏-->
<div id="big">
<img id="bigImg" src="big.jpg" />
</div>
even.clientX<input type="text" value="0" id="test" /><br/>
even.clientY<input type="text" value="0" id="test1" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var small = $(".small")[0];
var slider = $(".slider")[0];
var big = document.getElementById("big");//试一试js获取
var bigImg = document.getElementById("bigImg");
//让slider跟随鼠标移动.给小的方块绑定事件
$(".small").mousemove(function(e) {
var even = e || event; //兼容火狐浏览器
var x = even.clientX - small.offsetLeft - slider.offsetWidth/2;
var y = even.clientY - small.offsetTop - slider.offsetHeight/2;
//测试even.clientX和even.clientY
$("#test").val(even.clientX);
$("#test1").val(even.clientY);
//水平方向的最大值
var maxX = small.clientWidth - slider.clientWidth;
//竖直方向的最大值
var maxY = small.clientHeight - slider.clientHeight;
if(x<0){
//相当于超出左侧,超出左侧时,拉回
x=0;
}
//超出右侧时拉回
if(x>maxX){
x = maxX;
}
//顶部超出
if(y<0){
y=0;
}
//底部超出
if(y>maxY){
y = maxY;
}
slider.style.top = (y+small.offsetTop) + "px";
slider.style.left = (x+small.offsetLeft) + "px";
//放大的图片的主要实现代码:比例计算, big.scrollLeft是id=big的div中下方滚轴的位置
//由于id=big的div设置成固定大小，而图片又非常大，所以这个div就像个放大镜一样在大图上晃
//比例计算很简单，鼠标在缩略图的位置与缩略图宽高比=鼠标在大图位置与大图宽高比，现在未知数是大图鼠标的位置
big.scrollLeft = x/maxX * (bigImg.clientWidth - big.clientWidth) ;
big.scrollTop = y/maxY * (bigImg.clientHeight -big.clientHeight) ;
});
//鼠标移入事件
$(".small").mouseenter(function(){
//鼠标移入到缩略图时候实现,上面出现的小的方块
$(".slider").css("display","block");
$("#big").css("top",small.offsetTop+"px");
//隐藏的大图=获取左图的左边位置+宽度+10(隔开点缝隙与缩略图)+px
big.style.left = small.offsetLeft + small.offsetWidth + 10 + "px";
//右侧的大图区域显示出来图片
$("#big").css("display","block");
});
//移除事件
//添加鼠标移出事件,鼠标移出缩略图的时候
$(".small").mouseleave(function(){
$(".slider").css("display","none");
$("#big").css("display","none");
});
</script>
</body>
</html>
下载demo
-
链接： http://pan.baidu.com/s/1mhAlGec 密码：kyrl
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- jQuery：案例11 放大镜效果
- 淘宝放大镜的两种实现方法JS
- javascript – 你是如何把放大镜和“搜索”放在stackoverflow的搜索框中的？
- 让 Vuepress 支持图片放大功能
- 随机放大的不规则瀑布流
- 为BlueLake主题增加图片放大效果
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Think Python
Allen B. Downey / O'Reilly Media / 2012-8-23 / GBP 29.99
Think Python is an introduction to Python programming for students with no programming experience. It starts with the most basic concepts of programming, and is carefully designed to define all terms ......一起来看看 《Think Python》 这本书的介绍吧!
