新闻滚动，从顶端插入：

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

 var $this = $(".scrollNews");

            var scrollTimer;

            $this.hover(function () {

                clearInterval(scrollTimer);

            }, function () {

                scrollTimer = setInterval(function () {

                    scrollNews($this);

                }, 2000);

            }).trigger("mouseleave");

            function scrollNews(obj) {

                var $self = obj.find("ul");

                var lineHeight = $self.find("li:first").height();

                $self.animate({

                    "marginTop": +lineHeight + "px"

                }, 600, function () {

                    $self.css({

                        marginTop: 0

                    }).find("li:first").before('<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>');

                })

            }

});

</script>

</head>

<body>

<div class="scrollNews"  >

<ul id="p1">

<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>

<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>

<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>

<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>

<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>

<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>

<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>

</ul>

</div>

</body>

</html>

相关资源：

Github:

https://github.com/CheneyYang?tab=repositories

从顶端插入,滚动展示（Demo）：的更多相关文章

  1. JavaScript学习笔记——简单无缝循环滚动展示图片的实现

    今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...

  2. OC基础之推荐一个旋转木马（跑马灯）效果的图片展示Demo

    这个旋转木马(跑马灯)效果的图片展示Demo,包括设定旋转方向,图片倒影,背景设置,旋转速度,开始结束,点击显示选中的图片,彩色的块展示等等功能 效果图:(源码下载:https://github.co ...

  3. 微信小程序调用后台接口+热点新闻滚动展示

    1.微信JS文件,发送请求调用:  //将返回接口数据,写入Page({data})里面 //获取热点新闻,这个也是写在onload:function(){//code)里面的 wx.request( ...

  4. K3cloud、erp系统实时滚动展示未处理数据，监控投诉处理进度

     痛点:企业内部erp人工记录产品投诉销售单,是否跟踪处理完客户投诉,结果不能实时透明,当天还有多少未解决的投诉单,也不能实时查看到,除非手工去系统单据查询,很不方便,跟踪也不顺畅!   解决方案:利 ...

  5. HTML＋CSS实现大盒子在小盒子的展示范围内进行滚动展示

    HTML+CSS实现大盒子在小盒子的展示范围内进行滚动展示 1.效果展示: 2.主要代码:样式: overflow:auto; 3.如果想要消除对应的滚动条: .out::-webkit-scroll ...

  6. js实现数据流（日志流，报警信息等）滚动展示，并分页（含实现demo）

    在项目中有遇到,后台向前端推送数据,前端以数据流的形式展示,即来一条我增加一条,类似于日志,报警等信息展示,想必大部分人都有遇到过,本来出于想找一个好的展示方式的心态,因为感觉自己设计的不太好看,结果 ...

  7. 基于canvas图像处理的图片展示demo

    图片展示网页往往色彩繁杂,当一个网页上有多张图片的时候用户的注意力就很不容易集中,而且会造成网站整个色调风格的不可把控. 能不能把所有的预览图变成灰度图片,等用户激活某张图片的时候再上色呢? 以前,唯 ...

  8. （七）大图展示Demo引出的UIScrollView的使用

    UIScrollView是一个能够滚动的视图控件,可以通过滚动查看所有内容. 用途: 1.一张大图屏幕放不下,可以用各个方向的手势来看大图的各个部分. 2.手机的设置页面有很多的选项,需要上下滚动来查 ...

  9. 使用iframe实现上下窗口结构及登录页全窗口展示Demo

    iframe.html 首页 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

随机推荐

  1. Junit+ant+JaCoCo集成使用

    接上文,本文主要介绍Junit+ant+JaCoCo集成使用 1.工具的下载上传 需要的工具有: apache-ant-1.10.5-bin.tarapache-tomcat-8.0.50.tarja ...

  2. i.e 和e.g 的区别

    i.e 和e.g 的区别 两者都是拉丁文缩写 i.e是id est的缩写,意思是that is. e.g是exempli gration的缩写,意思是for example;

  3. python-unittest-生成测试报告

    HTMLTestRunner HTMLTestRunner 是 Python 标准库的 unittest 单元测试框架的一个扩展.它生成易于使用的 HTML 测试报告. 一.目录结构 先来看一下项目的 ...

  4. 关于CSS单位:rem vh vw vmin vmax

    rem(root em) 如果你给body设置了font-size字体大小,那么body的任何子元素的1em就是等于body设置的font-size demo: body {  font-size: ...

  5. windows下使用linux命令搜文件

    在linux系统的黑幕下,我们只能通过find命令来搜文件,而在windows的界面里,我们只能通过搜索框来搜.两者各有利弊,前者单调但高效,后者用户体验好却比较慢.能不能在windows使用linu ...

  6. 【备忘录】Sublime Text编辑器如何在选中的多行行首增加字符串

    如题:上面的代码,想在每一行的开头加上一个字符 * 如下: 操作步骤如下: 1.选中要操作的行(我这里Ctrl+A) 2.Ctrl+Shift+L (待操作状态) 3.方向键←   (操作这步骤后,可 ...

  7. (OPC Client .NET 开发类库)网上很多网友都有提过，.NET开发OPC Client不外乎下面三种方法

    1. 背景 OPC Data Access 规范是基于COM/DCOM定义的,因此大多数的OPC DA Server和client都是基于C++开发的,因为C++对COM/DCOM有最好的支持.现在, ...

  8. 关于FPGA电源精度要求

    FPGA对DC-DC精度的要求不断提升 FPGA厂商不断采用更先进的工艺来降低器件功耗,提高性能,同时FPGA对供电电源的精度要求也越加苛刻,电压必须维持在非常严格的容限内,如果供电电压范围超出了规范 ...

  9. 使用GDI+保存带Alpha通道的图像（续）

    之前结合网上的一些代码及ATL::CImage的实现,自己写了一个将HBITMAP以PNG格式保存到文件到函数.见上一篇日记. 不过,后来换了个环境又发现了问题,昨天和今天上午把<Windows ...

  10. 初学者手册-IDEA中的Git

    1.Git的更新.提交.还原 IDEA中Git的更新.提交.还原方法 2.设置Git的提交方式为http 3.