文档章节

上下滚动播报特效

hming
 hming
发布于 2016/11/28 10:44
字数 140
阅读 8
收藏 0
点赞 0
评论 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
css杂类收集

单行不换行显示 需要设置宽度/或者最大宽度 width:xxxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; 如果想要设计input 输入框的边框格式 需要手动添加边框 border:1px s...

bosscheng
2015/10/21
83
0
分享 21 个最新的超酷 web 设计特效

日期:2012-3-25 来源:GBin1.com 如果你想让你的网站与众不同并且留给访客极深的印象,创建一个超炫的特效网站绝对是你第一步需要去考虑的,这里我们收集了21个超酷设计特效的网站。希望能够...

gbin1
2012/03/27
2.5K
7
来自Nike Better World的视差滚动(Parallax Scrolling)特效 - 分享一些教程和灵感

日期:2011/11/03 来源:Queness 编译:GBin1.com 介绍 视差滚动特效(parallax scrolling)是web开发目前比较火的一个小技巧,我们需要特别感谢Nike Better World带给我们的这个超酷的设计。 ...

gbin1
2011/11/03
267
0
来自Nike Better World的视差滚动(Parallax Scrolling)特效 ...

日期:2011/11/03 来源:Queness 编译:GBin1.com 介绍 视差滚动特效(parallax scrolling)是web开发目前比较火的一个小技巧,我们需要特别感谢Nike Better World带给我们的这个超酷的设计。 ...

gbin1
2011/11/03
0
0
jQuery Easy Ticker

jQuery easy ticker 是新闻播报类的插件,可以无限的滚动列表,支持高度自定义,灵活并且提供大量的功能,支持所有的浏览器。 在线演示

叶秀兰
2014/12/10
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MyBatis源码解读之延迟加载

1. 目的 本文主要解读MyBatis 延迟加载实现原理 2. 延迟加载如何使用 Setting 参数配置 设置参数 描述 有效值 默认值 lazyLoadingEnabled 延迟加载的全局开关。当开启时,所有关联对象都会延...

无忌
10分钟前
0
0
javascript 类变量的实现

代码如下: function echo(){ for(let i=0;i<arguments.length;i++) console.log(arguments[i]);}function extend(o, p){for (prop in p) {o[prop] = p[prop]}retur......

backbye
14分钟前
0
2
编程语言对比分析:Python与Java和JavaScript(图)

编程语言对比分析:Python与Java和JavaScript(图): 凭什么说“Python 太慢,Java 太笨拙,我讨厌 JavaScript”?[图] 编程语言生而为何? 我们人类从原始社会就是用语言表达自己,互相沟通...

原创小博客
22分钟前
0
0
Akka构建Reactive应用《one》

看到这Akka的官网,描述使用java或者scala构建响应式,并发和分布式应用更加简单,听着很高级的样子,下面的小字写着消息驱动,但是在quickstart里面又写容错事件驱动,就是这么钻牛角尖。 ...

woshixin
34分钟前
0
0
ffmpeg源码分析 (四)

io_open 承接上一篇,对于avformat_open_input的分析还差其中非常重要的一步,就是io_open,该函数用于打开FFmpeg的输入输出文件。 在init_input中有这么一句 if ((ret = s->io_open(s, &s-...

街角的小丑
35分钟前
0
0
String,StringBuffer ,StringBuilder的区别

不同点 一、基类不同 StringBuffer、StringBuilder 都继承自AbStractStringBuilder,String 直接继承自 Object 2、底层容器“不同” 虽然底层都是字符数组,但是String的是final修饰的不可变...

不开心的时候不要学习
50分钟前
0
0
nodejs 文件操作

写文件code // 加载文件模块var fs = require("fs");var content = 'Hello World, 你好世界!';//params 文件名,内容,编码,回调fs.writeFile('./hello.txt',content,'utf8',function (er......

yanhl
53分钟前
0
0
SpringBoot mybits 查询为0条数据 但是在Navicat 中可以查询到数据

1.页面请求: 数据库查询: 2018-07-16 17:56:25.054 DEBUG 17312 --- [nio-9010-exec-3] c.s.h.m.C.selectSelective : ==> Preparing: select id, card_number, customer_id, customer_nam......

kuchawyz
今天
0
0
译:Self-Modifying cod 和cacheflush

date: 2014-11-26 09:53 翻译自: http://community.arm.com/groups/processors/blog/2010/02/17/caches-and-self-modifying-code Cache处在CPU核心与内存存储器之间,它给我们的感觉是,它具......

我叫半桶水
今天
0
0
Artificial Intelligence Yourself

TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理。Tensor(张量)意味着N维数组,Flow(流)意味着基于数据流图的计算,TensorFlow为张量从流...

孟飞阳
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部