当前位置:  首页  >  前端开发  >  JavaScript

js实现文字垂直滚动和鼠标悬停效果_javascript技巧-js教程

这篇文章主要介绍了js实现文字垂直滚动和鼠标悬停效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例介绍了文字垂直滚动效果,主要运用了setInterval(function(){}, time);方法,分享给大家供大家参考,具体内容如下
HTML布局:

CSS样式:


JS脚本:

《script》
  // 不断把新的第一个追加到后面 
  function vscroll() {
    var frtEle = $('.recommend-info li:first');
    frtEle.animate({'marginTop': -$('.recommend-info li').height()}, 500, function(){
      frtEle.css('marginTop', 0);
      $('.recommend-info').append(frtEle);
    });
  }
  var startInterval = setInterval(vscroll, 3000);

  // 鼠标悬停 
  $('.recommend-info li').hover(function(){
    clearInterval(startInterval);
  }, function(){
    startInterval = setInterval(vscroll, 3000);
  });
《script》

以上就是本文的全部内容,谢谢关注!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有