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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
Javascript和jquery在selenium的使用过程
Oct 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
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
Linux文件操作命令都有哪些
2016/07/23 面试题
大学运动会入场词
2014/02/22 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
如何写求职信
2014/05/24 职场文书
明星邀请函
2015/02/02 职场文书
项目验收申请报告
2015/05/15 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python