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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
基于jQuery实现瀑布流页面
Apr 11 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
详解jQuery中的easyui
Sep 02 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 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 存储文本换行实现方法
2010/01/05 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
python with statement 进行文件操作指南
2014/08/22 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
企划主管岗位职责
2013/12/12 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
高中班主任评语
2014/12/30 职场文书
工作保证书
2015/01/17 职场文书
装修安全责任协议书
2016/03/22 职场文书
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
nginx rewrite功能使用场景分析
2022/05/30 Servers
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android