文档章节

上下滚动播报特效

hming
 hming
发布于 2016/11/28 10:44
字数 140
阅读 8
收藏 0

html:

<div style="height:50px;overflow:hidden;font-size: 14px;font-weight: bold;">
    <ul class="line">
        <li style="line-height:25px;">
            <span class="glyphicon glyphicon-hand-right"></span>
            <span style="color:red;">最新播报1</span>&nbsp;&nbsp;
            <span style="color:#5CB85C;">test1</span>
            <span class="glyphicon glyphicon-hand-right"></span>
            <span style="color:red;">最新播报2</span>&nbsp;&nbsp;
            <span style="color:#5CB85C;">test2</span>
            <span class="glyphicon glyphicon-hand-right"></span>
            <span style="color:red;">最新播报3</span>&nbsp;&nbsp;
            <span style="color:#5CB85C;">test3</span>
        </li>
    </ul>
</div>

script:

<script>
    $(function(){
        var _wrap=$('ul.line');
        var _interval=2000;
        var _moving;
        _wrap.hover(function(){
            clearInterval(_moving);
        },function(){
            _moving=setInterval(function(){
                var _field=_wrap.find('li:first');
                var _h=_field.height();
                _field.animate({marginTop:-_h+'px'},600,function(){
                    _field.css('marginTop',0).appendTo(_wrap);
                })
            },_interval);
        }).trigger('mouseleave');
    });
</script>

© 著作权归作者所有

共有 人打赏支持
hming
粉丝 3
博文 88
码字总数 86648
作品 0
深圳
程序员
私信 提问
30款jQuery常用网页焦点图banner图片切换 下载

1、jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2、jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3、jQuery图片层叠旋转类似洗牌翻转图片幻灯片 查看演示 ...

awbeci
2013/09/18
0
0
2012年度最新的10个原创Jquery插件

漫画原创名片提示框Jquery插件最初版 此Jquery插件是一款非常实用的功能,像微博和一些大平台的会员信息都是以名片示的弹出层显示,今天把它封装成一个插件分享给大家用,这是最初版本功能已...

邓剑彬
2012/11/29
605
6
2012年度最新的10个原创Jquery插件

漫画原创名片提示框Jquery插件最初版 此Jquery插件是一款非常实用的功能,像微博和一些大平台的会员信息都是以名片示的弹出层显示,今天把它封装成一个插件分享给大家用,这是最初版本功能已...

邓剑彬
2012/11/29
41
0
9 个单页面网站开发必备 jQuery 插件

单页面网站作为简单快捷,易于维护的页面设计方案,越来越受到工作室,作品集,或者个人博客类网站用户的青睐,我们可以使用不同的特效来使得页面更加的丰富和炫动,今天我们将介绍几款可以作...

gbin1
2012/07/25
8.4K
5
js+css3实现立体式图片旋转特效

js+css3实现立体式图片旋转特效 效果描述: 立体式多图围绕旋转效果,可以上下左右拖动,也可自滚动 js配合css3,可以说是一个完美的搭配 使得页面非常的轻,占用内存低,完美解放客户端浏览...

wybo521
2016/01/15
71
0

没有更多内容

加载失败,请刷新页面

加载更多

FTP 协议 1.0

自己制作的FTP协议:

Explorer0
11分钟前
1
0
Android 通过DrawableInflater加载自定义Drawable

一、Drawable 在Android系统张,图形图像的绘制需要在画布上进行操作和处理,但是绘制需要了解很多细节以及可能要进行一些复杂的处理,因此系统提供了一个被称之为Drawable的类来进行绘制处理...

IamOkay
22分钟前
1
0
灵活无处安放,所以选择流浪....《漆黑的空间》& 《灰色轨迹》

灵活无处安放,所以选择流浪....《漆黑的空间》& 《灰色轨迹》

yizhichao
28分钟前
1
0
Kafka+Flink 实现准实时异常检测系统

1.背景介绍 异常检测可以定义为“基于行动者(人或机器)的行为是否正常作出决策”,这项技术可以应用于非常多的行业中,比如金融场景中做交易检测、贷款检测;工业场景中做生产线预警;安防...

架构师springboot
今天
7
0
DecimalFormat 类基本使用

/* * DecimalFormat 类主要靠 # 和 0 两种占位符号来指定数字长度 * 0 表示如果位数不足则以 0 填充 * # 表示只要有可能就把数字拉上这个位置 * */ public static void main(String[] args){...

嘴角轻扬30
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部