原生js实现公告滚动效果

本文实例为大家分享了js实现公告滚动展示的具体代码，供大家参考，具体内容如下

1.html结构

<body>
 <div id="notice" class="notice">
  <ul id="noticeList">
   <li>我是公告1</li>
   <li>我是公告2</li>
   <li>我是公告3</li>
   <li>我是公告4</li>
  </ul>
 </div>
</body>

2.css样式

<style type="text/css">
  body,
  div,
  ul,
  li {
   margin: 0;
   padding: 0;
  }

  ul,
  li {
   list-style: none;
  }

  .notice {
   width: 300px;
   height: 30px;
   border: 1px solid black;
   text-align: center;
   overflow: hidden;
  }

  li {
   padding: 3px;
  }
 </style>

3.js行为

<script type="text/javascript">
  window.onload = function() {
   var notice = document.getElementById("notice");
   var noticeList = document.getElementById("noticeList");

   // 获取ul下第一个li元素，好计算li的高度，因为后面滚动的时候每次要滚动一个高度，这里li都是一样高的，
   // 所以获取第一个的高度就行了，不然要遍历获取每一个li的高度。
   var noticeFirstItem = noticeList.querySelector("li");

   // 获取li的高度，这里获取的是offsetHeight，关于js各种高度的定义可以注意以下
   var scrollHeight = noticeFirstItem.offsetHeight;
   // 是否可以进行动画
   var opt = {
    animated: true,
    interval: 1000
   };

   notice.onclick = function() {
    // 动画之前首先重置
    // noticeFirstItem.style.transition = "";
    noticeFirstItem.style.marginTop = 0;
    if (opt.animated) {
     opt.animated = false;
     animate(noticeList, scrollHeight, opt);
    }
   };
  };

  // 动画函数，obj——要产生动画的对象，sHeight——每次要滚动的距离，interval——多久滚动一次
  function animate(obj, sHeight, option) {
   // 当滚到最后一条公告的时候就不用动画了。
   var stopHeight = sHeight - obj.scrollHeight;
   var marginTopNum = 0;
   var timer = setInterval(function() {
    marginTopNum -= sHeight;
    obj.style.marginTop = marginTopNum + "px";
    obj.style.transition = "margin-top 1.5s ease";
    // 注意这里的比较符号，前面得到的高度都进行四舍五入了
    if (marginTopNum <= stopHeight) {
     clearInterval(timer);
     // option.animated = true;
    }
   }, option.interval);
  }
 </script>

4.运行结果

动画在进行中时注意控制不能进行其他动画！

结束语：不要把动画想得很难，当你想实现复杂的动画时，比如jquery的animate方法，你可以先实现针对一个属性的动画，然后再想办法扩展到多个属性（即以对象方式去传参，然后遍历对象中的每个样式属性，然后给每个样式属性添加动画）。以前都是用js去实现每一帧每一帧的移动，即在肉眼无法反应过来的时间里产生移动，这样就能产生连续移动的效果，现在css3出来了，可以方便的利用css3来实现过渡效果了，而不用复杂的js来实现了。这个真的太棒了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js向上无缝滚动,网站公告效果 具体代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv=&q

  • jquery插件之文字间歇自动向上滚动效果代码

    本文实例讲述了jquery插件之文字间歇自动向上滚动效果代码.分享给大家供大家参考,具体如下: 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

  • jQuery实现的文字逐行向上间歇滚动效果示例

    jQuery实现的文字逐行向上间歇滚动效果示例

    本文实例讲述了jQuery实现的文字逐行向上间歇滚动效果.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery文字逐行向上滚动代码</title> <link href="css/index.css" rel=&quo

  • 利用10行js代码实现上下滚动公告效果

    利用10行js代码实现上下滚动公告效果

    需求 在最近的项目中需要实现公告栏滚动显示效果如下: 解决方案 1. HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); <div class="notice"> <ul> <li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li> <li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li> <li>第3条公告第3条公告第3条公告第3条公告第

  • Jquery公告滚动+AJAX后台得到数据

    aspx 复制代码 代码如下: <script src="http://www.cnblogs.com/js/jquery/jquery.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/js/common/jquery.timers.js" type="text/javascript"><

  • jQuery实现单行文字间歇向上滚动源代码

    使用jQuery实现单行文字间歇向上滚动 效果网址:http://www.keleyi.com/keleyi/phtml/textscroll.htm 本效果加强版:http://www.keleyi.com/a/bjac/532bedbffca1affa.htm 主要增加了光标悬停效果 以下是源代码: 复制代码 代码如下: <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/j

  • jquery垂直公告滚动实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JavaScript实现的滚动公告特效【基于jQuery】

    JavaScript实现的滚动公告特效【基于jQuery】

    本文实例讲述了JavaScript实现的滚动公告.分享给大家供大家参考,具体如下: 今天给大家分享一篇滚动公告的特效. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动公告</title> <script src="http://libs.baidu.com/jque

  • 基于jQuery的公告无限循环滚动实现代码

    在线演示:http://demo.jb51.net/js/2012/callboard/jQuery代码 复制代码 代码如下: //第二版:Newton改造 (function (win){ var callboarTimer; var callboard = $('#callboard'); var callboardUl = callboard.find('ul'); var callboardLi = callboard.find('li'); var liLen = callboard.

  • jQuery实现上下滚动公告栏详细代码

    jQuery实现上下滚动公告栏详细代码

    之前做项目的时候,一直都想着做一个上下滚动的公告栏,作为展示网站的最新公告信息,因为刚开始自己的思路并不是太清晰,在网上找了很多的源码,但是却发现都不能让自己满意,有的还会出现一些小问题,比如,有时候公告上下滚动的时候,两条公告会重叠在一起.最后我还是决定自己写一个上下滚动的公告栏. 虽然在网上找的有些代码有时候会出现一些问题,但是思路咱还是可以借鉴一下的. 我们先来看一下,我做的上下滚动公告栏效果图,如果你感觉是你要的那款,那么你再接着往下看是怎么实现的. 图中箭头所指内容就是公告内容,它会不

  • jQuery实现公告文字左右滚动的实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

随机推荐