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

 更新时间:2016年01月17日 09:45:21   投稿:hebedich  
本文给大家分享的是2则使用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种方法都可以实现页面右侧的随动广告特效,希望对大家能够有所帮助。

相关文章

  • JQuery中Text方法用法实例分析

    JQuery中Text方法用法实例分析

    这篇文章主要介绍了JQuery中Text方法用法,实例分析了Text方法设置文本内容的使用方法,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • jQuery日历插件datepicker用法详解

    jQuery日历插件datepicker用法详解

    这篇文章主要为大家详细介绍了jQuery日历插件datepicker用法,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jquery 将当前时间转换成yyyymmdd格式的实现方法

    jquery 将当前时间转换成yyyymmdd格式的实现方法

    下面小编就为大家带来一篇jquery 将当前时间转换成yyyymmdd格式的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考
    2016-06-06
  • 解决jQuery uploadify在非IE核心浏览器下无法上传

    解决jQuery uploadify在非IE核心浏览器下无法上传

    之前上传了一个通过Flash实现多文件上传,但是在IE正常运行,FireFox 不能正常上传。经过反复研究学习,之所以firefox和360浏览器无法正常运行,是因为FireFox、chrome、360浏览器等支持HTML5的浏览器不会再文件上传时自动带入session信息和cookie,不共享session。
    2015-08-08
  • jquery捕捉回车键及获取checkbox值与异步请求的方法

    jquery捕捉回车键及获取checkbox值与异步请求的方法

    这篇文章主要介绍了jquery捕捉回车键及获取checkbox值与异步请求的方法,实例分析了jQuery针对回车键的捕捉,checkbox值的获取以及异步请求的响应等相关技巧,需要的朋友可以参考下
    2015-12-12
  • jquery事件preventDefault()方法用法实例

    jquery事件preventDefault()方法用法实例

    这篇文章主要介绍了jquery事件preventDefault()方法用法,实例分析了preventDefault()方法的功能及使用技巧,需要的朋友可以参考下
    2015-01-01
  • JQuery获取样式中的background-color颜色值的问题

    JQuery获取样式中的background-color颜色值的问题

    用JQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome、Firefox显示的格式不一样,经搜索找到了下段代码可解决此问题,感兴趣的朋友可以参考下
    2013-08-08
  • jQuery插件制作的实例教程

    jQuery插件制作的实例教程

    一款优秀的jQuery插件,要做到通用、灵活度高、可配置、兼容性好、易用性高、耦合度低...想要做到这些,嘿嘿,那么就来看今天所介绍的jQuery插件制作的实例教程.
    2016-05-05
  • jQuery实现在新增加的元素上添加事件方法案例分析

    jQuery实现在新增加的元素上添加事件方法案例分析

    这篇文章主要介绍了jQuery实现在新增加的元素上添加事件方法,结合具体实例形式分析了jQuery针对新增加的元素添加事件的实现技巧与注意事项,需要的朋友可以参考下
    2017-02-02
  • jQuery提示效果代码分享

    jQuery提示效果代码分享

    这里给大家分享几段JQuery提示效果的代码,非常的简单实用,有需要的小伙伴直接拿走吧
    2014-11-11

最新评论