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 相关文章推荐
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
angular之ng-template模板加载
Nov 09 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
JS实现分页导航效果
Feb 19 Javascript
js中实现继承的五种方法
Jan 25 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
TensorFlow的权值更新方法
2018/06/14 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
怎么样写好简历中的自我评价
2013/10/25 职场文书
房地产销售大学生自我评价分享
2013/11/11 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
中班幼儿评语大全
2014/04/30 职场文书
倡议书范文格式
2014/05/12 职场文书
大专学生求职信
2014/07/04 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
撤诉状格式范本
2015/05/19 职场文书
英文投诉信格式
2015/07/03 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技