js实现消息滚动效果


Posted in Javascript onJanuary 18, 2017

今天教大家做个消息滚动的小功能。实现的很简单。自己都有点意想不到呢~  哈哈

1.实现的中心思想,如图所示:

js实现消息滚动效果

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 #Javascript
微信小程序的动画效果详解
Jan 18 #Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 #Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 #Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 #Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 #Javascript
vue.js+Element实现表格里的增删改查
Jan 18 #Javascript
You might like
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP 批量删除 sql语句
2009/06/05 PHP
js代码实现微博导航栏
2015/07/30 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
JavaScript 动态生成方法的例子
2009/07/22 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python函数装饰器用法实例详解
2015/06/04 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Django 再谈一谈json序列化
2020/03/16 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
Python过滤序列元素的方法
2020/07/31 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
2014年国培研修感言
2014/03/09 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
企业安全生产检查制度
2015/08/06 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers