A5下载 - 努力做内容最丰富最安全的下载站!

A5站长下载站

当前位置:A5下载 > 编程开发 > 网站开发 > JQuery实现网页右侧随动广告特效

JQuery实现网页右侧随动广告特效

时间:2016-01-18 09:31作者:fang人气:171

方法一:

<script type="text/javascript">// <![CDATA[

$.fn.smartFloat = function() {

var position = function(element) {

var top = element.position().top, pos = element.css("position");

$(window).scroll(function() {

var scrolls = $(this).scrollTop();

if (scrolls > top) {

if (window.XMLHttpRequest) {

element.css({

position: "fixed",

top: "10px"

});

} else {

element.css({

top: scrolls

});

}

}else {

element.css({

position: pos,

top: top

});

}

});

};

return $(this).each(function() {

position($(this));

});

};

//绑定

$("#float").smartFloat();

// ]]></script>

方法二:

/*页面智能层浮动*/

jQuery(document).ready(function($){

var $sidebar = $(".float"),

$window = $(window),

offset = $sidebar.offset(),

topPadding = 20;

$window.scroll(function() {

if ($window.scrollTop() > offset.top) {

$sidebar.stop().animate({

marginTop: $window.scrollTop() - offset.top + topPadding

});

} else {

$sidebar.stop().animate({

marginTop: 0

});

}

});

});

HTML

<div id="float" class="float">

<h3>推荐</h3>

广告代码

</div>

以上2种方法都可以实现页面右侧的随动广告特效,希望对大家能够有所帮助。

标签JQuery,实现,网页,右侧,随动,广告,特效,方法,sc

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号