js实现文字垂直滚动和鼠标悬停效果


Posted in Javascript onDecember 31, 2015

本文实例介绍了文字垂直滚动效果,主要运用了setInterval(function(){}, time);方法,分享给大家供大家参考,具体内容如下
HTML布局:

<ul class="recommend-info">
  <li>
    <span class="push">荐</span>
    <a href="javascript:;">1高档社区,经典户型,机会难得,稍纵即逝!仅售66万!</a>
    <span class="htype">66万  3室2厅1卫 120?</span>
  </li>
  <li>
    <span class="push">荐</span>
    <a href="javascript:;">2高档社区,经典户型,机会难得,稍纵即逝!仅售66万!</a>
    <span class="htype">66万  3室2厅1卫 120?</span>
  </li>
  <li>
    <span class="push">荐</span>
    <a href="javascript:;">3高档社区,经典户型,机会难得,稍纵即逝!仅售66万!</a>
    <span class="htype">66万  3室2厅1卫 120?</span>
  </li>
  <li>
    <span class="push">荐</span>
    <a href="javascript:;">4高档社区,经典户型,机会难得,稍纵即逝!仅售66万!</a>
    <span class="htype">66万  3室2厅1卫 120?</span>
  </li>
</ul>

CSS样式:

<style>
  .recommend-info {
    width: 630px;
    height: 42px;
    padding: 0 10px;
    margin-top: 12px;
    margin-bottom: 18px;
    border: 1px dashed #DFDFDF;
    overflow: hidden;
  }
  .recommend-info li {
    overflow: hidden;
    font-size: 14px;
    line-height: 42px;
  }
  .recommend-info li .push {
    float: left;
    display: inline-block;
    width: 18px;
    height: 17px;
    margin-top: 12px;
    margin-right: 10px;
    background: #D95B4E;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 17px;
  }
  .recommend-info li a {
    float: left;
    color: #333;
  }
  .recommend-info li a:hover {
    color: #da5c4f;
  }
  .recommend-info li .htype {
    float: right;
    color: #999;
  }
</style>

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>

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

Javascript 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
jquery 双色表格实现代码
Dec 08 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 #Javascript
jQuery语法小结(超实用)
Dec 31 #Javascript
解决JS无法调用Controller问题的方法
Dec 31 #Javascript
简单谈谈JavaScript的同步与异步
Dec 31 #Javascript
jQuery实现简单的图片查看器
Sep 11 #Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 #Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 #Javascript
You might like
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python判断无向图环是否存在的示例
2019/11/22 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
幼师自荐信范文
2013/10/06 职场文书
自我评价优秀范文分享
2013/11/30 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
房产代理公证处委托书
2014/04/04 职场文书
个人主要事迹材料
2014/08/26 职场文书
活动总结新闻稿
2014/08/30 职场文书
小学运动会报道稿
2014/10/04 职场文书
体育委员竞选稿
2015/11/21 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
golang的文件创建及读写操作
2022/04/14 Golang