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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
详解JavaScript 的变量
Mar 08 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
利用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 中执行系统外部命令
2006/10/09 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
python list语法学习(带例子)
2013/11/01 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
办理暂住证介绍信
2014/01/11 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
教师一帮一活动总结
2014/07/08 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python