js在鼠标悬停的时候放大一张图片
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js在鼠标悬停的时候放大一张图片相关的知识，希望对你有一定的参考价值。
鼠标悬停放大图片，让图片类似于从中间向四周扩散，想来想去不知道应该怎么实现，只改变宽高就等于从左上角向右下角滑动了，求哪位好心人告诉我应该怎么实现？
设置图片的父元素为相对定位；
设置图片为绝对定位；
假设图片宽为w，高为h，放大后的宽为2w，高为2h，则计算其位置如下：
left:-(2w-w)/2,
top:-(2h-h)/2
JS （随着鼠标的移动，旁边显示放大图）
相信大家都知道，在淘宝，京东等购物网站中，商品的图片会随着鼠标的指示在旁边显示大图，在这里我就给大家分享一下这种效果的编码和实现；
实际上这种效果就是两张图片，一张大的图片和一张的小的图片，我这里是一张大的图片然后压缩之后获得小的图片；
这里把css代码和js代码均在，方便大家参考；
本人源代码拷贝：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 533px;
height: 300px;//该尺寸是根据实际图片的大小来调整比例的；
margin-right: 20px;
float: left;
}
.div1{
background-image: url("402.jpg");
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<script src="../js/jQuery-2.2.2-min.js"></script>
<script>
$(".div1").on({
"mousemove": function (event){
var X=event.clientX;
var Y=event.clientY;
$(".div2").css({
"background-image": "url(\'402.jpg\')",
"background-repeat": "no-repeat",
"background-position":(30-X*3)+"px"+" "+(30-Y*3)+"px"});
},
"mouseout": function (){
$(".div2").css("background-image","");
}
});
</script>
</body>
</html>
显示效果如下：
感兴趣的小伙伴们，可以试试哟！！
以上是关于js在鼠标悬停的时候放大一张图片的主要内容，如果未能解决你的问题，请参考以下文章