竖直滚动 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);







 
 
 
 
相关文章
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
115 0
|
JavaScript
jQuery实现无缝图片滚动效果
jQuery实现无缝图片滚动效果
203 67
|
9月前
|
JavaScript 前端开发 UED
jquery实现文字点选验证码
通过上述步骤,可以使用jQuery实现一个功能完整、易用的文字点选验证码系统。该系统不仅能够有效防止自动化攻击,还可以通过友好的交互提升用户体验。希望本文的详解能够为开发者提供有价值的参考,帮助实现高效的验证码功能。
258 14
|
10月前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
280 16
|
10月前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
241 9
|
10月前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
10月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
118 2
|
11月前
|
JavaScript
基于jQuery实现文字点击验证代码
jQuery文字点击验证代码基于jquery-3.4.1.min.js制作,按顺序,依次点击文字通过验证。
86 5
|
11月前
|
JavaScript
jQuery实现的滚动切换图表统计特效源码
jQuery实现的滚动切换图表统计特效源码是一段全屏滚动的企业当月运营报告数据统计图表代码,涵盖流行的线性、圆形、柱形图统计方式,适应于绝大多数企业,欢迎感兴趣的朋友前来下载参考。
84 2
|
11月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
122 1