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







 
 
 
 
相关文章
|
8月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
4月前
|
JavaScript
jQuery实现无缝图片滚动效果
jQuery实现无缝图片滚动效果
159 67
|
1月前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
52 16
|
28天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
44 9
|
1月前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
29天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
29 2
|
2月前
|
JavaScript
基于jQuery实现文字点击验证代码
jQuery文字点击验证代码基于jquery-3.4.1.min.js制作,按顺序,依次点击文字通过验证。
37 5
|
29天前
|
JavaScript 前端开发
jquery输入框键入文字动画特效
这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时,通过jquery代码来制作文字的动画效果,非常炫酷。
32 0
|
2月前
|
JavaScript
jQuery实现的滚动切换图表统计特效源码
jQuery实现的滚动切换图表统计特效源码是一段全屏滚动的企业当月运营报告数据统计图表代码,涵盖流行的线性、圆形、柱形图统计方式,适应于绝大多数企业,欢迎感兴趣的朋友前来下载参考。
31 2
|
2月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
30 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等