这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了 js 实现消息滚动效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
今天教大家做个消息滚动的小功能。实现的很简单。自己都有点意想不到呢~ 哈哈
1. 实现的中心思想,如图所示:
2. 图片移动,用的是 appendTo() 这个方法。这个方法是先将标签从父标签中删除,然后拼接到某个标签后面,所以也就是替我们实现了,remove() 这个方法。所以用这个方法是极好的~
3. 然后就会用到定时器了。用定时器每次调用移动方法,让 <ul> 每次执行一个动画,改变它的 margin-top 值,执行完动画后,再将它的 margin-top 变为初始值;
4. 触摸 <ul> 标签清除定时器,离开后,继续执行。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 滚动信息
- </title>
- <style>
- *{ margin: 0; padding:0; } .scroll-box{ width: 400px; 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:
- center; }
- </style>
- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
- </script>
- <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>
- </head>
- <body>
- <div class="scroll-box">
- <ul>
- <li>
- 1好消息!好消息!本店所有商品全部白送1
- </li>
- <li>
- 2好消息!好消息!本店所有商品全部白送2
- </li>
- <li>
- 3好消息!好消息!本店所有商品全部白送3
- </li>
- <li>
- 4好消息!好消息!本店所有商品全部白送4
- </li>
- <li>
- 5好消息!好消息!本店所有商品全部白送5
- </li>
- <li>
- 6好消息!好消息!本店所有商品全部白送6
- </li>
- <li>
- 7好消息!好消息!本店所有商品全部白送7
- </li>
- <li>
- 8好消息!好消息!本店所有商品全部白送8
- </li>
- </ul>
- </div>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0703/328383.html