jquery滚动效果,jquery左右滑动效果

jquery跑马灯效果

要实现简单的跑马灯效果其实运用html中marquee/marquee标签就可以达到了

基本属性如下：

1.滚动方向direction（包括4个值：up、 down、 left和 right）

2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）

3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）

4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）

5.滚动循环loop（默认值是-1，滚动会不断的循环下去）

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

如果想要更多的动画效果，更多选择jquery.marquee.js这款插件——ul里的啥都能滚并自带悬停效果

1.html 中写入ul id="marquee"li/li/ul

2.js中调入$("#marquee").marquee();即可

3.css比较简单，一般自己写，大致如下：

ul.marquee{display:block;line-height:1;position:relative;overflow:hidden;width:400px;height:22px;}

ul.marquee li{ position:absolute;top:-999em;left:0; display:block; white-space:nowrap ;padding:3px5px;text-indent:0.8em;}

4.相关参数如下：

{

yScroll:"top";  // 初始滚动方向 (还可以是"top" 或 "bottom")

showSpeed:850;  // 初始下拉速度

scrollSpeed:12;  // 滚动速度

pauseSpeed:5000;  // 滚动完到下一条的间隔时间

pauseOnHover:true;  // 鼠标滑向文字时是否停止滚动

loop:-1;  // 设置循环滚动次数 （-1为无限循环）

fxEasingShow:"swing";  // 缓冲效果

fxEasingScroll:"linear";  // 缓冲效果

cssShowing:"marquee-showing";  //定义class event handlers

init:null;  // 初始调用函数

beforeshow:null;  // 滚动前回调函数

show:null;  // 当新的滚动内容显示时回调函数

aftershow:null;  // 滚动完了回调函数

}

相关问答

Q1: jquery 如何实现回顶部 带滑动效果

返回顶部：设置为body的scrollTop为0

滑动效果：animate（Jquery的自定义动画）

$("#returnTop").click(function () {

        var speed=200;//滑动的速度

        $('body,html').animate({ scrollTop: 0 }, speed);

        return false;

 });

备注：returnTop为触发返回顶部的元素ID

Q2: jquery怎么实现平滑滚动效果 就是随着滚动条而滚动

var timer;  

    $(function(){  

      //滚动条滚动触发

      $(window).scroll(function(){  

        clearInterval(timer);  

        var topScroll=getScroll();  

        var topDiv="100px";  

        var top=topScroll+parseInt(topDiv);  

        timer=setInterval(function(){  

             //动画移动

             $(".test").animate({"top":top},500);  

        },500)  

      })  

    })  

    function getScroll(){  

         var bodyTop = 0;    

         if (typeof window.pageYOffset != 'undefined') {    

             bodyTop = window.pageYOffset;    

         } else if (typeof document.compatMode != 'undefined'  document.compatMode != 'BackCompat') {    

             bodyTop = document.documentElement.scrollTop;    

         }    

         else if (typeof document.body != 'undefined') {    

             bodyTop = document.body.scrollTop;    

         }    

         return bodyTop  

    }

Q3: JQuery 实现在同一页面锚点链接之间的平滑滚动

web开发前端一直用JQuery

，真正接触了才体会到，JQuery

原来比我想象的要强大的多，也可能比我体会到的还要强大的多，特别是兼容性那个好，于是把一些好玩的，酷炫的，可以代替

JS

的，统统给用上了。

从

JQuery

引入今天的正题，用

JQuery

实现锚点链接之间的平滑滚动。以前介绍过一个用

JS

实现的页面锚点跳转缓冲特效，效果相当不错，可以在同一页面的锚点链接之间实现平滑的滚动，但是

JS

代码相对来说比较冗长，现在好了，只要已经加载了

JQuery，我们就可以用较为简短的代码实现相同的效果。

使用方法如下：

1、载入

JQuery

库；

2、关键代码：

$(document).ready(function()

{

$('a[href*=#]').click(function()

{

if

(location.pathname.replace(/^\//,

'')

==

this.pathname.replace(/^\//,

'')

location.hostname

==

this.hostname)

{

var

$target

=

$(this.hash);

$target

=

$target.length

$target

||

$('[name='

+

this.hash.slice(1)

+

']');

if

($target.length)

{

var

targetOffset

=

$target.offset().top;

$('html,body').animate({

scrollTop:

targetOffset

},

1000);

return

false;

}

}

});

});

还是再要强调一下加载的顺序，先引用JQuery

类库。顺便说一下，经测试，该滚动效果在各浏览器下都兼容适用，唯有在

Opera

下表现有点怪异，还有待改进。

Q4: jQuery实现带滚动导航效果的全屏滚动相册实例

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下：

运行效果图如下：

主要代码如下：

$(function()

{

//加载时的图片

var

$loader=

$('#st_loading');

//获取的ul元素

var

$list=

$('#st_nav');

//当前显示的图片

var

$currImage

=

$('#st_main').children('img:first');

//加载当前的图片

//同时显示导航的项

$('img').load(function(){

$loader.hide();

$currImage.fadeIn(3000);

//滑出导航

setTimeout(function(){

$list.animate({'left':'0px'},500);

},

1000);

}).attr('src',$currImage.attr('src'));

//计算出将被显示的略缩图所在的div元素的宽度

buildThumbs();

function

buildThumbs(){

$list.children('li.album').each(function(){

var

$elem

=

$(this);

var

$thumbs_wrapper

=

$elem.find('.st_thumbs_wrapper');

var

$thumbs

=

$thumbs_wrapper.children(':first');

//每张略缩图占有180像素的宽度和3像素的间距(margin)

var

finalW

=

$thumbs.find('img').length

*

183;

$thumbs.css('width',finalW

+

'px');

//是这元素具有滚动性

makeScrollable($thumbs_wrapper,$thumbs);

});

}

//点击菜单项目的时候（向上向下箭头切换）

//使略缩图的div层显示和隐藏当前的

//打开菜单（如果有的话）

$list.find('.st_arrow_down').live('click',function(){

var

$this

=

$(this);

hideThumbs();

$this.addClass('st_arrow_up').removeClass('st_arrow_down');

var

$elem

=

$this.closest('li');

$elem.addClass('current').animate({'height':'170px'},200);

var

$thumbs_wrapper

=

$this.parent().next();

$thumbs_wrapper.show(200);

});

$list.find('.st_arrow_up').live('click',function(){

var

$this

=

$(this);

$this.addClass('st_arrow_down').removeClass('st_arrow_up');

hideThumbs();

});

//点击略缩图，改变大的图片

$list.find('.st_thumbs

img').bind('click',function(){

var

$this

=

$(this);

$loader.show();

$('img

class="st_preview"/').load(function(){

var

$this

=

$(this);

var

$currImage

=

$('#st_main').children('img:first');

$this.insertBefore($currImage);

$loader.hide();

$currImage.fadeOut(2000,function(){

$(this).remove();

});

}).attr('src',$this.attr('alt'));

}).bind('mouseenter',function(){

$(this).stop().animate({'opacity':'1'});

}).bind('mouseleave',function(){

$(this).stop().animate({'opacity':'0.7'});

});

//隐藏当前已经打开了的菜单的函数

function

hideThumbs(){

$list.find('li.current')

.animate({'height':'50px'},400,function(){

$(this).removeClass('current');

})

.find('.st_thumbs_wrapper')

.hide(200)

.andSelf()

.find('.st_link

span')

.addClass('st_arrow_down')

.removeClass('st_arrow_up');

}

//是当前的略缩图div层滚动

//当鼠标移至菜单层的时候会自动地进行滚动

function

makeScrollable($outer,

$inner){

var

extra

=

800;

//获取菜单的宽度

var

divWidth

=

$outer.width();

//移除滚动条

$outer.css({

overflow:

'hidden'

});

//查找容器上的最后一张图片

var

lastElem

=

$inner.find('img:last');

$outer.scrollLeft(0);

//当用户鼠标离开菜单的时候

$outer.unbind('mousemove').bind('mousemove',function(e){

var

containerWidth

=

lastElem[0].offsetLeft

+

lastElem.outerWidth()

+

2*extra;

var

left

=

(e.pageX

-

$outer.offset().left)

*

(containerWidth-divWidth)

/

divWidth

-

extra;

$outer.scrollLeft(left);

});

}

});

希望本文所述对大家的jQuery程序设计有所帮助。