竖直滚动 jquery 文字 图片

简介: 竖直滚动 jquery   文字 图片 .box4{height:200px;overflow:hidden;} .
<pre name="code" class="html">竖直滚动 jquery   文字 图片 
  

.box4{height:200px;overflow:hidden;}  <pre name="code" class="html">  .box4 ul{height:auto;}


<div class="box4"> <ul> <li>
</li>
<ul>
</div>


$('.box4').myScroll({
        speed:500,
        scroll_speed:500,
        see:8
    });



(function($){
    $.fn.myScroll = function(options){
        var defaults = {
            speed:40,
            see:4,
            rowHeight:35,
            scroll_speed:200
        };
        var opts = $.extend({}, defaults, options),Increase=0;
        var _self = $(this),
            speeds = opts['speed'],
            $son = $(this).find('li'),
            Reduce=scroll_li = $son.length - opts['see'],
            son_ht = $son.innerHeight(),
            scroll_spd = opts.scroll_speed;
        function marquee(obj,step){
            obj.animate({
                scrollTop: step+'px'
            },scroll_spd,function(){
                intervalFun();
            });
        }
        function intervalFun(){
            var interval = setInterval(function(){
                var _step =0;
                if(scroll_li > Increase){
                    ++Increase;
                    _step = son_ht*Increase;
                    marquee(_self,_step);
                    clearInterval(interval);
                }else if(Reduce != 0){
                    --Reduce;
                    _step = son_ht*Reduce;
                    marquee(_self,_step);
                    if(Reduce < 1){
                        Reduce = scroll_li;
                        Increase=0;
                    }
                    clearInterval(interval);
                }
            },speeds);
        }
        intervalFun();
    }
})(jQuery);







 
 
 
 
相关文章
|
10月前
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
49 0
|
12月前
|
JavaScript
jQuery 动态输入文字展示效果
jQuery 动态输入文字展示效果
80 0
|
4月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1天前
|
JavaScript
jQuery实现无缝图片滚动效果
jQuery实现无缝图片滚动效果
25 10
|
4月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
87 1
|
3月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
4月前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
4月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
12月前
|
JavaScript
jQuery lazyload.js 懒加载可视范围图片
jQuery lazyload.js 懒加载可视范围图片
58 0
|
10月前
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
85 0
jQuery点击图片来回切换功能