码迷,mamicode.com
首页 > Web开发 > 详细

jQuery banner 滑动

时间:2016-04-13 18:46:12      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

jQuery(document).ready(function() {
var abovePos = 50;
var customMax = 1600;
var zIdx = 100;
var $bnr = $(‘#block‘);
var $win = $(window);
var $doc = $(document);

$bnr.css(‘zIndex‘, zIdx);

var offset = $bnr.offset();
var pos = $bnr.position();
var maxPos = customMax - abovePos;

$win.scroll(function() {
  var st = $doc.scrollTop();
  var newPos = st - offset.top;
  if (st > offset.top) {
    if (st > maxPos) {
      newPos = maxPos - offset.top;
    }
    $bnr.stop().animate({
      top: pos.top + newPos + abovePos
    });
  } else {
    $bnr.stop().animate({
      top: pos.top
    })
  }
});
});

在线DEMO: http://output.jsbin.com/mogufewodu

jQuery banner 滑动

标签:

原文地址:http://www.cnblogs.com/zlog/p/5387828.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!