我看到网页里有一张图片，鼠标移动上去，图片会动一下，我不想用css做请问怎么解决哦
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我看到网页里有一张图片，鼠标移动上去，图片会动一下，我不想用css做请问怎么解决哦相关的知识，希望对你有一定的参考价值。
我主要是淘宝店铺装修里面用，淘宝店铺自定义里面是用不了css的 不用css怎么解决这个问题，求大神帮忙解答
参考技术A 这课css可以做点简单的效果，复杂的要用js做，既然淘宝不给用css。 js肯定也是不给用的，我看是没戏的- - 参考技术B 你看到的效果不知道是什么做的，但动一下至少得css，复杂的用js，淘宝上你店铺不支持css的话是没戏的。本回答被提问者采纳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>
显示效果如下：
感兴趣的小伙伴们，可以试试哟！！
以上是关于我看到网页里有一张图片，鼠标移动上去，图片会动一下，我不想用css做请问怎么解决哦的主要内容，如果未能解决你的问题，请参考以下文章
canvas里有一张图，怎么实现鼠标可以拖动该图片移动，放大缩小旋转
C#在winform上画一张大于全屏的图片(至少3000*3000像素)。在窗口最大化下用鼠标拖动图片，必须画面流畅。
C#在winform上画一张大于全屏的图片(至少3000*3000像素)。在窗口最大化下用鼠标拖动图片，必须画面流畅。