jQuery banner 滑动

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

时间: 2024-08-27 07:35:22

jQuery banner 滑动的相关文章

全新jquery多点滑动幻灯片——全屏动画animateSlide

首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把html.css和jquery代码copy到页面上即可呈现完美画面. html代码如下: <div class="animateSlide"> <div class="animateSlideImgWrap"> <div class=&quo

jquery制作滑动面板

[web开发]☆★之jquery制作滑动面板 项目开发中,我们有时候需要点击某个按钮出现一个面板,在面板上有我们需要的一些操作,或者是图片.ok!如下简单制作滑动面板效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

基于jQuery左右滑动切换特效 附源码

分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: 1 <div class="bodyCon08"><!--学员--> 2 <div class="students"> 3 4 <div id="four_flash"> 5 <div class="flashB

20 个非常棒的jQuery内容滑动插件

WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑,是很不错的图像滑块设计工具. Nivo Slider Nivo Slider是一款出色的jQuery幻灯片插件,支持多种切换效果,可定制性强. Simple Multi-Item Slider一款基于jQuery插件的多项目滚动条,Simple Multi-Item Slider Category slider with

banner滑动juqery特效 带自动切换

突然在网络上找不到合适的banner滑动切换代码了--之前不找的时候一搜一大把,我有点意外,好容易找到一个,竟然在笔记本电脑上不兼容.不得已,自己手写了一个,其实代码也非常简单,懂得它的原理,改淡入淡出,加上向前,向后小图标也非常容易. 请转载此文的朋友务必附带原文链接,谢谢. 原文链接:http://xuyran.blog.51cto.com/11641754/1878370 js代码如下: //滑动切换 var page = 1; function bannerSlide() {     v

基于jQuery左右滑动切换特效

分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="bodyCon08"><!--学员--> <div class="students"> <div id="four_flash"> <div class="flashBg&qu

19个非常有用的 jQuery 图片滑动插件和教程

jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入精美的效果.今天这篇文章向大家分享19个非常有用的 jQuery 图片滑动插件和教程. Slides Smooth Div Scroll Create an Image Rotator with Description Animate Panning Slideshow with jQuery Create a S

jQuery 效果 —— 滑动

jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $("p").slideDown(); }); (2)语法: $(selector).slideDown(speed,callback) 参数说明: speed:下滑的速度,单位为毫秒: callback:执行完下滑后要执行的函数. 2.向上滑动元素 (1)使用slideUp()方法用于向上滑动元素

超简洁的jQuery内容滑动插件 - Basic jQuery Slider

摘要 内容滑动插件能让你在有限的空间中展示更多的内容,给力技术之前也推荐过好几个这类插件,今天要推荐的也是一个内容滑动插件 - Basic jQuery Slider . Basic jQuery Slider 是一个轻量级的很简洁的 jQuery 内容滑动插件,经压缩后也仅有4.6kb大 内容滑动插件能让你在有限的空间中展示更多的内容,给力技术之前也推荐过好几个这类插件,今天要推荐的也是一个内容滑动插件 - Basic jQuery Slider. Basic jQuery Slider 是一