在Javascript中单击图像时出现问题

时间:2012-12-12 23:56:59

标签: javascript

我正在使用javascript进行图片库,当我点击图片放大图片库时,它不会放大到页面的中心,而是完全放大页面。如何在放大图像时将图像移动到中心?我的画廊将在午夜到期,我似乎无法让它上​​班!我的教授暗示我需要让图像在放大时向上和向左移动。如果有人可以提供帮助我真的很感激!

1 个答案:

答案 0 :(得分:1)

没有看到代码,我只能解释这些概念。你必须同时使用JS和CSS。这是一个例子:

这是JS:

 $(document).ready(function(){
            if($(".myImage img").width() > $(".myImage").width()) {
                var url = $(".myImage img").prop("src");
                $(".myImage").css("background","url("+url+") no-repeat center center").empty();                
            }else{
                $(".myImage img").width($(".myImage").width()).height($(".myImage").height());
            }
        });

这是HTML:

<div class="myImage">
        <img src="http://cdn.walyou.com/wp-content/uploads//2010/12/facebook-profile-picture-no-pic-avatar.jpg" width="350"/>
    </div>

最后是CSS中的代码:

.myImage { border:1px solid #000; width:300px; height:300px; overflow:hidden; }