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实现前端分页功能
Mar 23 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery操作css样式
May 15 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jQuery实现手风琴特效
Jan 11 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
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
简单的JS多重继承示例
2008/03/13 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
JS delegate与live浅析
2013/12/21 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
python重试装饰器的简单实现方法
2019/01/31 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Django模板语言 Tags使用详解
2019/09/09 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
小学三年级数学教学反思
2014/01/31 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
中学生学习保证书
2015/02/26 职场文书
致运动员加油稿
2015/07/21 职场文书