Question

This是我的网页。如您所见，当您将“广告”按钮悬停时，转换仅显示广告的一部分。我希望它能显示整个AD。这是我正在使用的代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {$(".wcfbslide").hover(function() {$(this).stop().animate({right: "-5"}, "slow");}, function() {$(this).stop().animate({right: "-300"}, "medium");}, 500);});
</script>
<style type="text/css">
    .wcfbslide{
         background: url("http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/ads1.png") no-repeat scroll left center transparent !important;
         display: block; 
         float: right;
         height: 110px;
         padding:0 5px 0 46px;
         width: 295px;
         z-index: 99999;
         position:fixed;
         right:-300px;
         top:30%;
    }

    .wcfbslide div {
        border:none;
        position:relative;
        display:block;
    }

    .wc-gplusfollow {
         position: relative;
         padding: 10px;    
         background:#ffffff;     
         border: 1px solid #ccc;
         box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
    }
</style>
    <div class="wcfbslide">
        <div class="wc-gplusfollow">
            <script src="http://fanscity.eu/ads/728x90.js"></script>
        </div>
    </div>

Answer 1

你可以增加“正确”属性的值，现在悬停它正确：-5px，尝试使其正确440px。

$(this).stop().animate({right: "440px"}, "slow");

Answer 2

请记住，横幅长728像素，因此“.wcfbslide”的宽度至少应为728像素（宽度：728像素;）。它最初是隐藏的：将正确的属性设置为-728px（右：-728px;）。

然后，您需要将动画更改为：

$(document).ready(function() {$(".wcfbslide").hover(function() {$(this).stop().animate({right: "0"}, "slow");}, function() {$(this).stop().animate({right: "-728"}, "medium");}, 500);});

Answer 3

您的宽度和边距需要稍微调整一下。 JSFiddle虽然不会显示图像。

JSFiddle

使用Javascript：

$(".wcfbslide").hover(function () {
    $(this).stop().animate({
        right: "-5"
    }, "slow");
}, function () {
    $(this).stop().animate({
        right: "-735"
    }, "medium");
}, 500);

CSS：

.wcfbslide {
    background: url("http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/ads1.png") no-repeat scroll left center transparent !important;
    display: block;
    float: right;
    height: 110px;
    padding:0 5px 0 46px;
    width: 728px;
    z-index: 99999;
    position:fixed;
    right:-735px;
    top:30%;
}

滑动框错误

3 个答案: