如何通过jquery将图像从上到下进行更改

how to change image top to bottom by jquery

本文关键字：从上到下 图像 何通过 jquery      更新时间：2023-09-26

我在jsfiddle中有广告代码：Fiddle

如何更改2个广告始终显示底部时，我滚动页面（或更改填充/边距底部）

HTML

<div class="wrapper">
    <div class="adsl">
        <image alt='scoll1-2tieng' src='http://www.maydoduonghuyet.com.vn/uploads/partners/scoll1_2tieng.gif' width='120' height='300' />
    </div>
    <div class="adsr">
        <image alt='scoll2-hdsd' src='http://www.maydoduonghuyet.com.vn/uploads/partners/scoll2_hdsd.jpg' width='120' height='300' />
    </div>
</div>

jQuery：

$(document).ready(function() {
var sidebar   = $(".adsl");
    var offset    = sidebar.offset();
    var topPadding = 15;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
            sidebar.stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding
            });
        } else {
            sidebar.stop().animate({
                marginTop: 0
            });
        }
    });    
var sidebar2   = $(".adsr");
    var offset2    = sidebar2.offset();
    var topPadding2 = 15;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
            sidebar2.stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding2
            });
        } else {
            sidebar2.stop().animate({
                marginTop: 0
            });
        }
    });   
});

===最新===

感谢您的支持和想法。我已经按想法完成了问题position
这是代码简单：更新

    <div class="wrapper morediv">
    <div class="adsl"><image alt='scoll1-2tieng' src='http://www.maydoduonghuyet.com.vn/uploads/partners/scoll1_2tieng.gif' width='120' height='300' /></div>
<div class="adsr"><image alt='scoll2-hdsd' src='http://www.maydoduonghuyet.com.vn/uploads/partners/scoll2_hdsd.jpg' width='120' height='300'  /></div>
</div>

仅限css：

.wrapper{
    margin:0 auto;
    width: 500px;
    height: 1600px;
    position:relative;
    background: #FF0004
}
.adsl{
    position: fixed; margin-left: -135px; bottom: 0
}
.adsr{
    position: fixed; margin-left: 515px; bottom: 0
}

感谢所有

如果必须始终在底部显示广告，请使用position:fixed;

演示

.adsl img, .adsr img {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position:fixed;
    bottom:0px;
}
.adsl img{
     left:0;  /* set image to left */
     z-index:90; 
}
.adsr img{
     right:0; /* set image to right */
    z-index:90;
}

如果你想把广告放在底部，但仍然让它们有动画效果，那么把你的JavaScript改成这个

$(document).ready(function() {
    var sidebar   = $(".adsl");
    var offset    = sidebar.offset();
    var topPadding = 10;
    $(window).scroll(function() {
            sidebar.stop().animate({
                marginTop: $(window).scrollTop() + sidebar.height()/2 + topPadding
            });
    });    
    var sidebar2   = $(".adsr");
    var offset2    = sidebar2.offset();
    var topPadding2 = 10;
    $(window).scroll(function() {
            sidebar2.stop().animate({
                marginTop: $(window).scrollTop() + sidebar2.height()/2 + topPadding2
            });
    });
});

工作jsFiddle

旁注：上面的片段可以只写几行，但我不确定这种效果是否是OP想要的。

相关文章：