CSS3和jQuery的放大镜实例,实测攻略

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

转自国外的 CSS3和jQuery的11个实例教程 ,里面有11种的CSS3和jQuery 实现的惊人特效。

这么给力的东西,必须要仔细研究一番。废话不多说,奉上第一个实例的实测与中文注释。

效果预览:

放大镜实现图像缩放

 
代码测试:





放大镜测试实例














 

html部分

<div class="magnify">
<div class="large"></div>

<!-- 放入小图片 -->
<img class="small" src="/static/Uploads/wp/2012/11/iphone.jpg" width="200"/>

</div>

PS:好吧,这部分就不解释了,大家都懂的,没什么好说的。

 

CSS部分:

* {margin: 0; padding: 0;}
.magnify {width: 200px; margin: 50px auto; position: relative;}

/*创建一个玻璃放大镜的效果*/
.large {
width: 175px; height: 175px;
position: absolute;
border-radius: 100%;

/*处理放大镜的玻璃效果和阴影效果*/
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);

/*在这里载入对应的一张大图*/
background: url('http://www.frontopen.com/wp-content/uploads/2012/11/iphone.jpg') no-repeat;

/*默认情况下,不显示放大镜*/
display: none;
}

/*避免边缘重叠错误,使用样式display: block;进行处理*/
.small { display: block; }

 

JS部分:

$(document).ready(function(){

var native_width = 0;
var native_height = 0;

//开始创建鼠标事件函数
$(".magnify").mousemove(function(e){
//当用户将鼠标悬停在图像上,该脚本会先计算出小图像的尺寸。只有在小图像尺寸已知的情况下,该脚本才会显示缩放的版本。
if(!native_width && !native_height)//表示图像的宽度和高度不为0的判断
{
//创建一个新的图像对象,并将小图像的url赋值给对象,从而获取小图片的高宽值。
var image_object = new Image();
image_object.src = $(".small").attr("src");

//将对象的高度和宽度,赋值给全局变量。
native_width = image_object.width;
native_height = image_object.height;
}
else
{
//返回当前鼠标相对于窗口X/Y轴的位置,并处理放大镜跟随鼠标事件。
var magnify_offset = $(this).offset();
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;

//如果鼠标在容器之外,则隐藏,否则显示放大镜。
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(".large").fadeIn(100);
}
else
{
$(".large").fadeOut(100);
}
if($(".large").is(":visible"))//如果. large元素可见
{
//通过鼠标在小图像上的位置变化,改变大图像背景的位置。计算出鼠标指针下的像素比例,按照比例来调整大图像的位置。
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";

//鼠标移动放大镜参数
var px = mx - $(".large").width()/2;
var py = my - $(".large").height()/2;
//鼠标移动放大镜时,需要扣除一半的放大镜高度与宽度,才能保持鼠标处于放大镜的中间。

//将计算结果输出到html,实现移动放大镜。
$(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})

 

其他:

jQuery文件库支持,大家可以直接在网上引用,或者下载jQuery库。
微软的CDN,如果不想下载的话直接引用即可。
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>

源码下载: 点击下载