jquery实现广告上下滚动效果


Posted in jQuery onMarch 04, 2021

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

一、jquery上下滚动预约记录

jquery广告上下滚动效果,直接上代码

代码如下(示例):

CSS:

<style>

 /* -------------------------预约记录----------------------------------- */
 .Top_Record{}
 .topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#7C7C7C}
 .maquee{ height:265px;}
 .topRec_List ul{ width:100%; height:195px;}
 .topRec_List li{ height:35px;font-size:14px;width: 100% }
 /*.topRec_List li:nth-child(2n){ background:#077cd0}*/
 .topRec_List li div{ float:left;}
 .topRec_List li div:nth-child(1){ width:35%;}
 .topRec_List li div:nth-child(2){ width:35%;}
 .topRec_List li div:nth-child(3){ width:20%;}
 .maquee ul li{float: left}
 .active{
 color: #FC6A13;
 }
</style>

HTML:

<div style="background: #ffffff;width: 100%;margin-top: 5pt;padding-bottom: 10pt;padding-top: 5pt">
 <div class="titled"><p class="person">已有235人看房</p><p class="titleds">预约记录</p></div>
 <br>
 <div class="Top_Record">
 <div class="topRec_List">
 <dl>
{{-- <dd> </dd>--}}
 </dl>
 <div class="maquee">
 <ul>
 <li><div>张三1</div><div>131****121</div><div>10分钟前</div></li>
 <li><div>张三2</div><div>131****121</div><div>10分钟前</div></li>
 <li><div>张三3</div><div>131****121</div><div>10分钟前</div></li>
 </ul>
 </div>
 </div>
 </div>
</div>

JS:

<script type="text/javascript">

 const index = ($(".maquee").height() / $(".maquee ul li").height());
 function autoScroll(obj){
 $(obj).find("ul").animate({
 marginTop : "-35px"
 },1000,function(){
 $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
 })
 $(".maquee ul li").removeClass('active');
 $(".maquee ul li").eq(parseInt(index)+1).addClass('active')
 }
 $(function(){
 var scroll=setInterval('autoScroll(".maquee")',1500);
 });


 $(".maquee ul li").eq(parseInt(index)+1).addClass('active')

</script>

二、效果

jquery实现广告上下滚动效果

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

jQuery 相关文章推荐
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 #jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 #jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 #jQuery
jquery实现点击左右按钮切换图片
Jan 27 #jQuery
jquery实现穿梭框功能
Jan 19 #jQuery
jQuery实现穿梭框效果
Jan 19 #jQuery
jQuery冲突问题解决方法
Jan 19 #jQuery
You might like
一个ftp类(ini.php)
2006/10/09 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python实现单词翻译功能
2017/06/06 Python
python web基础之加载静态文件实例
2018/03/20 Python
python实现键盘输入的实操方法
2019/07/16 Python
python文件操作的简单方法总结
2019/11/07 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
盛大二次面试题
2016/11/18 面试题
大学自主招生自荐信范文
2014/02/26 职场文书
人事部专员岗位职责
2014/03/04 职场文书
合同协议书格式
2014/04/18 职场文书
政治思想表现评语
2014/05/04 职场文书
企业读书活动总结
2014/06/30 职场文书
国庆宣传标语
2014/06/30 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
车辆年检委托书范本
2014/10/14 职场文书
拾金不昧感谢信
2015/01/21 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
中学音乐课教学反思
2016/02/18 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL