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 相关文章推荐
JavaScript 对象、函数和继承
Jul 07 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 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
php函数传值的引用传递注意事项分析
2016/06/25 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vuejs router history 配置到iis的方法
2018/09/20 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
python中List的sort方法指南
2014/09/01 Python
Python的面向对象思想分析
2015/01/14 Python
Python实现的批量下载RFC文档
2015/03/10 Python
python实现二分查找算法
2017/09/21 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
Python实战购物车项目的实现参考
2019/02/20 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
Python必须了解的35个关键词
2020/07/16 Python
python PIL模块的基本使用
2020/09/29 Python
2014年班长个人工作总结
2014/11/14 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
暖春观后感
2015/06/08 职场文书
医院岗前培训心得体会
2016/01/08 职场文书