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日期范围选择器附源码下载
May 23 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery带控制按钮轮播图插件
Jul 31 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
使用无限生命期Session的方法
2006/10/09 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
一个选择最快的服务器转向代码
2009/04/27 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python实现抢购IPhone手机
2018/02/07 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
大学应届毕业生个人求职信
2013/09/23 职场文书
护理学毕业生自荐信
2013/10/02 职场文书
职高毕业生自我鉴定
2013/10/21 职场文书
行政求职信
2014/07/04 职场文书
2014年计生工作总结
2014/11/21 职场文书
英语邀请函范文
2015/02/02 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
Java 多线程协作作业之信号同步
2022/05/11 Java/Android