使用JavaScript&jQuery

效果图：

首先看HTML结构，css样式这里不再给出

            <div class="book_class"><div id="dome"><div id="dome1"><ul id="express"><li>・2010考研英语大纲到货75折...</li><li>・权威定本四大名著（人民文...</li><li>・口述历史权威唐德刚先生国...</li><li>・袁伟民与体坛风云：实话实...</li><li>・我们台湾这些年：轰动两岸...</li><li>・畅销教辅推荐：精品套书50...</li><li>・2010版法律硕士联考大纲75...</li><li>・计算机新书畅销书75折抢购</li><li>・2009年孩子最喜欢的书&gt;&gt;</li><li>・弗洛伊德作品精选集59折</li><li>・畅销教辅推荐：精品套书50...</li></ul></div></div></div>

js代码

请首先确保已经引入jQuery

  //滚动字//确保绝对定位//使用定时函数var top=0;var t = setInterval(function () {//先设置margin-top为0$("#express li:first").css("margin-top",top);//li的高度为25，故这里以25判断第一行是否走出ul。if(top<-25){//如果第一行已经走出ul，将top归零，为下个li做准备top=0;//这句话的意思是，先将首行的top设为0，拷贝该行，放置最后一行//注意，如果这里不将第一行的top归零，拷贝后他将保持top=-25的状态，效果就是叠加在最后一行上。$("#express li:first").css("margin-top",top).clone(true).appendTo ('#express');//移除首行，这时第二行变为首行$("#express li:first").remove();}else{//如果第一行还未走出ul，top自减top-=1;}},50);

额外的代码

实现当滚动时，鼠标放置后可以停止，移出时仍可以进行

  //当鼠标放置后停止，松开继续走$("#express li").hover(function() {//清除定时clearInterval(t);}, function() {t = setInterval(function () {//先设置margin-top为0$("#express li:first").css("margin-top",top);//li的高度为25，故这里以25判断第一行是否走出ul。if(top<-25){//如果第一行已经走出ul，将top归零，为下个li做准备top=0;//这句话的意思是，先将首行的top设为0，拷贝该行，放置最后一行//注意，如果这里不将第一行的top归零，拷贝后他将保持top=-25的状态，效果就是叠加在最后一行上。$("#express li:first").css("margin-top",top).clone(true).appendTo ('#express');//移除首行，这时第二行变为首行$("#express li:first").remove();}else{//如果第一行还未走出ul，top自减top-=1;}},50);});

11行代码实现滚动公告栏相关推荐

Python3，11行代码解密摩斯电码，真実はいつもひとつ。
11行代码破解摩斯密码 1.引言 2.代码示例 2.1摩尔斯电码科普 2.2 加密 2.3 解密 3.总结 1.引言小屌丝:鱼哥,快来求助求助! 小鱼:嗯? 啥事,让你这么慌慌张张的? 小屌丝:刚刚 ...
L1-008 求整数段和（解题报告 C语言实现）（11行代码AC~!）
立志用更少的代码做更高效的表达给定两个整数A和B,输出从A到B的所有整数以及这些数的和. 输入格式: 输入在一行中给出2个整数A和B,其中−100≤A≤B≤100,其间以空格分隔. 输出格式: 首先 ...
11行代码AC——比紫书优化，例题2-3 近似计算——解题报告
励志用更少的代码做高效的表达题意: 计算π/4 = 1 - 1/3 + 1/5 - 1/7 + -,直到最后一项小于10^-6. 思路分析: 本题很简单,因此计算重心从解题转化为优化. 本题为重复计 ...
11行代码AC——习题2-4　子序列的和（subsequence）——解题报告
励志用尽量少的代码做高效的表达. 题目描述: 输入两个正整数n<m<106,输出1/(n²)+1/((n+1)²)+--+1/(m²),保留5位小数.输入包含多组数据,结束标记为n＝m＝0 ...
蓝桥试题基础练习杨辉三角形——11行代码AC
注意点: 1.本质上是一道找规律的二维数组题(二维数组题多是这样,摆个阵,叫你找规律). 2.直接判断,a[i][j]等于a[i-1][j]+a[i-1][j-1]:的值 3.写数列时很容易想到用二维 ...
11行Python代码制作聊天机器人
小白也能开发自己的聊天机器人? Python语言能做到,而且只需要11行代码,就能开发出一个简单聊天的机器人陪你唠嗑! 一.项目思路因为Python丰富的开源库,可以控制微信接收/发送消息,因此用p ...
【神经网络】11行Python代码实现的神经网络
今天看了一篇神经网络的文章,作者用11行就实现了一个神经网络,原文地址:A Neural Network in 11 lines of Python (Part 1),深为叹服,翻译如下. BP(Ba ...
16行代码AC——例题6-4破损的键盘(Broken Keyboard,UVa 11988)——解题报告
励志用尽量少的代码做高效的表达. 题目(提交)链接→UVa-11988 题目大意: 输入一个字符串,输出在原本应该是怎么样的? 具体方法是: 若读取到'[', 则执行Home键:将光标移到行首. 若读 ...
【晒出你的第83行代码】阿里研究员福贝，用一个小演示程序来解释一下 C++11/14 里的 closure 是可以多么的“爽”...
为什么80%的码农都做不了架构师?>>> 摘要: 在五四青年节之际,社区发起了来晒晒属于你的"第83行"的活动,活动中邀请业界的大牛.大神们来晒代码或者Re ...
8个数据清洗Python代码，复制可用，最长11行 | 资源
原作 Kin Lim Lee 乾明编译整理量子位出品 | 公众号 QbitAI 最近,大数据工程师Kin Lim Lee在Medium上发表了一篇文章,介绍了8个用于数据清洗的Python代码. ...

11行代码实现滚动公告栏

使用JavaScript&jQuery

效果图：

首先看HTML结构，css样式这里不再给出

js代码

额外的代码

11行代码实现滚动公告栏相关推荐

最新文章

热门文章