jQuery实现广告条滚动效果


Posted in jQuery onAugust 22, 2017

本文实例为大家分享了jQuery实现广告条滚动效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{padding: 0px;margin: 0px;}
      #list{width: 150px;height: 310px;margin: 0px auto;border: 1px solid #ccc;overflow: hidden;}
      #list li{list-style: none;height: 30px;line-height: 30px;border-bottom: 1px dashed #999;}
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    <script>
      var marginTop = 0;//注意命名
      var scroll = true; 
      //定时函数,每150毫秒执行一次函数
      setInterval(function(){
        if(scroll){ 
          $("#list li:first").animate(  //第一个li开始执行动画
            {marginTop:marginTop--}, //设置上面的外边距自减
            0,
            function(){  //动画之后执行的函数

              if( -marginTop==$(this).height()+1){ //判断li移动的距离是否超过自身的高度
                var $f = $(this); //复制一个li
                $(this).remove(); //把第一个移除。第一个移除之后,第二个就自动变为第一个
                marginTop=0;
                $f.css("margin-top","0px");
                $("ul").append($f); //把第一个追加加到列表的最后,变成一个无缝连接
              }
            }
          );
        }
      },150);
      $(function(){
        $("ul").hover(function(){scroll = false;},function(){scroll = true;});

      });
    </script>
  </head>
  <body>
    <div id="list">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
      </ul>
    </div>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
基于jQuery的表单填充实例
Aug 22 #jQuery
使用jQuery实现简单的tab框实例
Aug 22 #jQuery
JQuery判断正整数整理小结
Aug 21 #jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 #jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 #jQuery
jQuery实现表格冻结顶栏效果
Aug 20 #jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 #jQuery
You might like
PHP If Else(elsefi) 语句
2013/04/07 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
使用Python实现简单的服务器功能
2017/08/25 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
python版本五子棋的实现代码
2018/12/11 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
西安当代医院管理研究院笔试题
2015/12/11 面试题
广州某公司软件工程师面试题
2014/12/22 面试题
幼儿园2014年度工作总结
2014/11/10 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
2021年最新用于图像处理的Python库总结
2021/06/15 Python
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技