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 放大镜 放大倍率和视窗尺寸
May 09 Javascript
js Math 对象的方法
Sep 01 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
js 编写规范
2010/03/03 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
javascript常用函数(2)
2015/11/05 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
python各类经纬度转换的实例代码
2019/08/08 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
使用python实现飞机大战游戏
2020/03/23 Python
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
C语言笔试集
2012/07/24 面试题
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
《三国志》赏析
2019/08/27 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
instantclient客户端 连接oracle数据库
2022/04/26 Oracle