jquery实现广告上下滚动效果

本文实例为大家分享了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>

二、效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Jquery数字上下滚动动态切换插件

    Jq打造的数字滚动插件,数字变化时,动态滚动切换,效果非常好. 我们先来看示例: CSS .textC { position:absolute; width:500px; overflow:hidden; margin-top: 100px; line-height:30px; margin-left: 300px; height:30px; } .textC span { color: #13BEEC; font-size: 28px; font-weight: bold; font-fami

  • 新闻上下滚动jquery 超简洁(必看篇)

    实例如下: <div class = "box"> <dl class="textlist"> <dd>11你好,欢迎来到我们</dd> <dd>22你好,欢迎来到我们</dd> <dd>33你好,欢迎来到我们</dd> <dd>44你好,欢迎来到我们</dd> <dd>55你好,欢迎来到我们</dd> </dl>

  • jQuery实现上下滚动公告栏详细代码

    jQuery实现上下滚动公告栏详细代码

    之前做项目的时候,一直都想着做一个上下滚动的公告栏,作为展示网站的最新公告信息,因为刚开始自己的思路并不是太清晰,在网上找了很多的源码,但是却发现都不能让自己满意,有的还会出现一些小问题,比如,有时候公告上下滚动的时候,两条公告会重叠在一起.最后我还是决定自己写一个上下滚动的公告栏. 虽然在网上找的有些代码有时候会出现一些问题,但是思路咱还是可以借鉴一下的. 我们先来看一下,我做的上下滚动公告栏效果图,如果你感觉是你要的那款,那么你再接着往下看是怎么实现的. 图中箭头所指内容就是公告内容,它会不

  • jquery 实现上下滚动效果示例代码

    复制代码 代码如下: <script type="text/javascript" src="script/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function() { var page = 1; var i = 1; var conheight = $('.con li').height(); var lilen =

  • jquery文字上下滚动的实现方法

    复制代码 代码如下: //上下滚动 var textRoll=function(){ $('#notice p:last').css({'height':'0px','opacity': '0'}).insertBefore('#notice p:first').animate({'height':'35px','opacity': '1'}, 'slow', function() { $(this).removeAttr('style');}); } $(function(){ //触发上下文

  • jquery 上下滚动广告

    复制代码 代码如下: (function($){ $.fn.extend({ rollList:function(option){ option=$.extend({ direction:"up", step:1, time:23 },option); var step_coe,scroll_coe,score_coe; if(option.direction=="up") { step_coe=1; scroll_coe=1; score_coe=1; }else

  • 如何使用jquery实现文字上下滚动效果

    实现文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字滚动</title> <style type="text/css"> #sidebar{width:20

  • 随鼠标上下滚动的jquery代码

    复制代码 代码如下: //随鼠标上下滚动 $(window).bind('scroll resize',function(){ $('#sidebar').stop(true, true).animate({ 'top': $(document).scrollTop() + 'px' },500); }).scroll().resize();

  • 一个JQuery写的点击上下滚动的小例子

    功能需求: 1.滚动框内显示10条记录: 2.有向上和向下滚动按钮,每次点击按钮向上或向下滚动记录条数,不自动滚动: 3.记录条数不循环滚动,滚动到起点或终点则停止滚动. 下面介绍一个简单实现方法: 1.外层容器(div) overflow: hidden,内层列表(ul) 2.按钮点击事件触发一个修改列表的函数 3.应用animate实现动画效果 具体不再啰嗦,直接上代码 CSS设置 复制代码 代码如下: <style type="text/css"> ul, li {

  • jQuery实现广告条滚动效果

    本文实例为大家分享了jQuery实现广告条滚动效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{padding: 0px;margin: 0px;} #list{width: 150px;height: 310px;margin: 0px auto;bor

  • jquery实现广告上下滚动效果

    jquery实现广告上下滚动效果

    本文实例为大家分享了jquery实现广告上下滚动效果的具体代码,供大家参考,具体内容如下 一.jquery上下滚动预约记录 jquery广告上下滚动效果,直接上代码 代码如下(示例): CSS: <style> /* -------------------------预约记录----------------------------------- */ .Top_Record{} .topRec_List dl,.maquee{ width:90%; overflow:hidden; margi

  • 使用Swift实现iOScollectionView广告无限滚动效果(DEMO)

    使用Swift实现iOScollectionView广告无限滚动效果(DEMO)

    今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: 1. 在你需要放置无限滚动展示数据的地方把他的数据,在原本的基础上把你要展示的数据扩大三倍.(当然扩大两倍也是可以的,三倍的话,比较好演示) // MARK: - 设置数据源 func collectionView(_ collectionView: UICollectionView, number

  • JQuery实现文字无缝滚动效果示例代码(Marquee插件)

    推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src=&quo

  • jquery实现的回旋滚动效果完整实例【附demo源码下载】

    jquery实现的回旋滚动效果完整实例【附demo源码下载】

    本文实例讲述了jquery实现的回旋滚动效果.分享给大家供大家参考,具体如下: 这里分享一款回旋滚动效果,先上效果图: 具体代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>jquery-roundabout</title> <style type="text/css&qu

  • jQuery模拟新浪微博首页滚动效果的方法

    本文实例讲述了jQuery模拟新浪微博首页滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • jquery实现图片水平滚动效果代码分享

    jquery实现图片水平滚动效果代码分享

    本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现图片水平滚动效果代码如下 <HEAD> <META content="text/html; charset=gb2312" http-equiv="Content-Type"> &

  • jQuery+css实现图片滚动效果(附源码)

    jQuery+css实现图片滚动效果(附源码)

    源码下载 bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间距,默认为0. auto:是否自动滚动,默认为false. auto_interval:当设为自动滚动时,每次滚动的时间间隔(毫秒),默认为2000毫秒即2秒. auto_dir:自动滚动的方向,默认为next,你可以试下prev. next_image:向右滚方向按钮图片,可以用CSS设

  • 基于jquery实现全屏滚动效果

    基于jquery实现全屏滚动效果

    那么今天就来介绍这款fullPage,与fullPage.js是不同的,fullpage兼容性更佳,能向下兼容到IE6, 不依赖任何 js 库,可独立使用.功能上虽然不如 fullPage.js 强大,但一般使用已经足够了,尤其是它的动画效果,你可以自由设定缩放.旋转以产生各种各样的动画效果.同时它还支持 fullPage.js 所没有的水平滚动. 兼容桌面端(ie5.5+) 和 手机端 你可以用它来构建你的个人主页或者网页应用 这是一个不使用jQuery小巧的框架 不到9KB 再介绍之前先看一

  • Android自定义控件之广告条滚动效果

    Android自定义控件之广告条滚动效果

    在一些电子商务网站上经常能够看到一些滚动的广告条,许多软件在首次使用时也有类似的广告条,如图: 其实在github上有实现这种效果的控件,不过这东西做起来也是很简单,我们今天就来看看该怎么做. 先来看看布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and

随机推荐