JS 实现消息滚动效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js实现消息滚动效果</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {margin:0;padding:0;
}
.scroll-box {width:200px;height:200px;border:2px solid #000;margin:20px auto;overflow:hidden;
}
.scroll-box ul {list-style:none;width:100%;height:100%;
}
.scroll-box ul li {width:100%;height:40px;box-sizing:border-box;line-height:40px;text-align:left;
}
</style>
</head>
<body>
<div class="scroll-box"><ul><li>1,课程html</li><li>2,课程css</li><li>3,课程js</li><li>4,课程jquery</li><li>5,课程html5</li><li>6,课程css3</li><li>7,课程php</li><li>8,课程bootstrap</li><li>9,课程apicloud</li></ul>
</div><script>
$(function() {//获得当前<ul>var $uList = $(".scroll-box ul");var timer = null;//触摸清空定时器$uList.hover(function() {clearInterval(timer);},function() { //离开启动定时器timer = setInterval(function() {scrollList($uList);}, 1000);}).trigger("mouseleave"); //自动触发触摸事件//滚动动画function scrollList(obj) {//获得当前<li>的高度var scrollHeight = $("ul li:first").height();//滚动出一个<li>的高度$uList.stop().animate({marginTop: -scrollHeight}, 600,function() {//动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。$uList.css({marginTop: 0}).find("li:first").appendTo($uList);});}
});
</script></body>
</html>

JS 实现消息滚动效果相关推荐

js实现抽奖滚动效果
目录一.效果展示二.代码说话三.总结经验一.效果展示本文介绍js实现抽奖滚动效果的实现过程.具体效果如下图: 二.代码说话话不多说,上代码最实在. 1.scroll.js var Scro ...
js实现title滚动效果
js实现title滚动效果原理:取第一个字符,放到尾部,定时循环操作,在视觉就有滚动效果了.直接上代码了方式一 var titleText = "您有新订单,请及时处理!".s ...
js歌词逐字滚动效果
js歌词逐字滚动效果 @Null - 滨先上效果图目录结构: 歌词文本music.txt 将酷狗歌词KRC用"酷狗歌词(krc)加解密工具"进行解密后可以得到这种歌词文本 HT ...
JS原生---歌词滚动效果案例
[开门见山] 实现目标: 需要让歌词列表随着播放的时间更新而滚动,即实时的跟随歌曲的进度而滚动效果: 需要事先准备的东西: 1.音频(mp3格式): 2.歌词(详细): 先展示html和css的实现 ...
html完成公告滚动条,原生js实现公告滚动效果
本文实例为大家分享了js实现公告滚动展示的具体代码,供大家参考,具体内容如下 1.html结构我是公告1 我是公告2 我是公告3 我是公告4 2.css样式 body, div, ul, li { ...
js实现文字滚动效果
在之前小编已经和大家介绍了一些常用的js动画效果,在此,和大家介绍一种可能不太常用的动画效果.该动画效果与文字相关,且,虽然不常用,但几乎每个人都见过它.相信大家都使用酷狗音乐或是网易云音乐进行音乐的 ...
HTML+CSS+JS实现简单滚动效果
html代码段,需要引用"autoScroll.js"和"autoScroll.css"两个文件 <!DOCTYPE html> <html ...
JS实现marquee滚动效果
前言 marquee标签是微软推出的一个增强html标签动画功能的标签,也是W3C不被推荐使用的标签,因为marquee标签存在两个缺点. marquee标签的缺点 1.浏览器间存在兼容性问题(IE8 ...
js实现向上滚动效果
源码: <style type="text/css"> #up_zzjs{border:1px solid #ccc;width:170px;height:182px; ...

JS 实现消息滚动效果

JS 实现消息滚动效果相关推荐

最新文章

热门文章