文档章节

上下滚动播报特效

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
8种Javascript过渡特效

看过很多后,本人觉得jQuery scrollable 在其中算很优秀的。 以下转自:http://paranimage.com/8-kinds-of-transition-effects-javascript/ 8种JavaScript 过渡特效 , 涵盖淡入淡出、翻转特...

晨曦之光
2012/03/09
0
0
2012年度最新的10个原创Jquery插件

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

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

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

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

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

wybo521
2016/01/15
71
0

没有更多内容

加载失败,请刷新页面

加载更多

《看图轻松理解数据结构与算法系列》导引贴

最近学习数据结构,遇到一个很喜欢的博主,他的文章图文并茂,理解起来很容易。特此开贴记录,方便反复阅读。 博主主页 https://juejin.im/user/57c3970f79bc440063e58518/posts?sort=popul...

科陆李明
43分钟前
1
0
20.27 分发系统介绍~ 20.30 expect脚本传递参数

分发系统介绍分发系统-expect讲解(也就是一个分发的脚本)场景:业务越来越大,网站app,后端,编程语言是php,所以就需要配置lamp或者lnmp,最好还需要吧代码上传到服务器上;但是因...

洗香香
58分钟前
2
0
设计一个百万级的消息推送系统

前言 首先迟到的祝大家中秋快乐。 最近一周多没有更新了。其实我一直想憋一个大招,分享一些大家感兴趣的干货。 鉴于最近我个人的工作内容,于是利用这三天小长假憋了一个出来(其实是玩了两...

crossoverJie
今天
2
0
软件架构:5种你应该知道的模式

Singleton(单例模式)、仓储模式(repository)、工厂模式(factory)、建造者模式(builder)、装饰模式(decorator)……大概每个上课听讲的程序员都不会陌生——软件的设计模式为我们提供...

好雨云帮
今天
3
0
OSChina 周二乱弹 —— 这只是一笔金钱交易

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《暮春秋色》- 窦唯 / 译乐队 《暮春秋色》- 窦唯 / 译乐队 手机党少年们想听歌,请使劲儿戳(这里) @我没有抓狂:跨服聊...

小小编辑
今天
1K
19

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部