大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

原生js如何实现公告滚动效果-创新互联

这篇文章主要介绍了原生js如何实现公告滚动效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

发展壮大离不开广大客户长期以来的信赖与支持,我们将始终秉承“诚信为本、服务至上”的服务理念,坚持“二合一”的优良服务模式,真诚服务每家企业,认真做好每个细节,不断完善自我,成就企业,实现共赢。行业涉及成都办公空间设计等,在网站建设营销型网站、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。js的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.js技术进行服务器端编程。

具体内容如下

1.html结构


 
  
   
  • 我是公告1
  •    
  • 我是公告2
  •    
  • 我是公告3
  •    
  • 我是公告4
  •     

    2.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;
      }
     

    3.js行为

    
      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);
      }
     

    4.运行结果

     原生js如何实现公告滚动效果

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

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

    感谢你能够认真阅读完这篇文章,希望小编分享的“原生js如何实现公告滚动效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


    文章标题:原生js如何实现公告滚动效果-创新互联
    路径分享:http://dzwzjz.com/article/eehgo.html

    其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP