Question

我们在网站上有一个投资组合，图像的分辨率非常高，但只有整个图像显示在屏幕上，而在小屏幕上，这还不足以看到细节。

我正在寻找是否有办法使用纯CSS来缩放图像到光标所在的位置。我知道您可以使用以下内容放大图像，但这并不是我们正在寻找的效果。

.image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

是否有没有java脚本的替代方案可以放大图像？

Answer 1

你必须使用Jquery / Javascript来做到这一点，css无法知道你的鼠标在哪里......

<script>
$(function() {
$("#idOfImage").hover(function(e) {

  var offset = $(this).offset();
  var relativeX = (e.pageX - offset.left - myConst);
  var relativeY = (e.pageY - offset.top - myConst);

  //now you've got X, Y position.
  this.css( "background-position", relativeX.toString()+" "+relativeY.toString());
  this.css("height", this.css("height")*myZoom);
  this.css("width", this.css("width")*myZoom);
});
});
</script>

Doc：http://api.jquery.com/css/

放一个html div：

<div id="idOfImage"></div>

的CSS：

#ifOdImage{
    [...]
    background-position: 0 0;
    [...]
}

doc：http://www.w3schools.com/cssref/pr_background-position.asp

是否可以使用CSS将鼠标悬停在图像上缩放到光标点？

1 个答案: