JQuery实现网页右侧随动广告特效
2016-01-17 00:00
716 查看
方法一:
方法二:
HTML
以上2种方法都可以实现页面右侧的随动广告特效,希望对大家能够有所帮助。
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
js实现跟随鼠标移动且带关闭功能的图片广告实例
jQuery网页右侧广告跟随滚动代码分享
<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种方法都可以实现页面右侧的随动广告特效,希望对大家能够有所帮助。
您可能感兴趣的文章:
js网页侧边随页面滚动广告效果实现js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
js实现跟随鼠标移动且带关闭功能的图片广告实例
jQuery网页右侧广告跟随滚动代码分享
相关文章推荐
- jquery.rotate插件实现抽奖的旋转效果
- Javascript/jQuery 获取地址栏URL参数的方法
- jquery 对checkbox操作
- jquery中的end()方法
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中
- jquery的一些小知识点
- Jquery 淡入淡出
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
- jquery的attr的一些bug
- Jquery 动画效果 左右移动
- jquery tmpl 详解
- jQuery Ajax 实例
- Atitit.jquery 版本号新特性attilax总结
- js/jquery使用记录
- FlexSlider是一个非常出色的jQuery滑动切换插件
- JQuery.ajsx实例
- jquery中奖实例代码
- jquery手机全屏上下滑动
- jQuery实现图片走马灯效果的原理分析
- jQuery ajax()使用serialize()提交form数据