Question

朋友您好我的JQuery代码存在问题。我使用show hide div和图像居中div与jquery代码。但是，当我使用只有图像为中心的jquery代码时，图像将以div为中心。然后当我添加show hide jquery函数图像居中功能不起作用。

这只是工作演示，只有居中的图像JQuery代码：

Demo

这不是以show/hide div：

为中心的图片居中div

Demo2

这是我show/hide div和以图像为中心的div代码的代码：

$('.imgs_w img').load(function () {
    var image = $(this),
        height = image.height(),
        width = image.width();

    if (width > height) {
        image.addClass('height');
        var middle = 0 - (image.width() - image.closest('.imgs_w').width()) / 2;
        image.css('margin-left', middle + 'px');
    } else {
        var middle = 0 - (image.height() - image.closest('.imgs_w').height()) / 2;
        image.css('margin-top', middle + 'px');
    }
});
 $(function(){
   $('div.slidingDiv').hide();
    // Watch for clicks on the "slide" link.
    $('div.ok').click(function () {
        // When clicked, toggle the "view" div.
        $('div.slidingDiv').slideToggle(400);
        return false;
    });
  });

我的代码需要什么？有人可以帮帮我吗？

Answer 1

http://jsfiddle.net/zK7h3/1/

将.slidingDiv放在页面视图之外的某处，例如left: -9999px;

.slidingDiv {
    height:150px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:5px;
    border-bottom:5px solid #3399FF;
    width: 50%;
    position:absolute;
    left: -9999px;
}

在图像加载时，如果在视图中后移，则应用hide（）：

$('div.slidingDiv').css('left', 0);
$('div.slidingDiv').hide();

通过这种方式，div将在图像加载上具有尺寸，并且js裁剪将起作用

Jquery图像div中心将无法使用jquery show hide功能

1 个答案: