上下轮流滚动公告代码

简介: 上下轮流滚动公告代码

公告代码

    <div class="focus-ctr"> <span class=""></span> <span class=""></span> <span class=""></span> </div>  <div class="mod mod-js"><style type="text/css"> 
header, nav, aside, menu, figure, article, footer { display:block; } 
body, div, form, textarea, label, input, ul, ol, li, dl, dt, dd, p, span, a, img, h1, h2, h3, h4, h5, h6, tbody, tfoot, tr, th, td, pre, code, form, fieldset, legend, font { margin:0; padding:0; } 
table { border-collapse:collapse; border-spacing:0; } 
caption, th { text-align:left; } 
sup { vertical-align:text-top; } 
sub { vertical-align:text-bottom; } 
li { list-style:none; } 
fieldset, img { border:none; } 
input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; 
color:inherit; _color:#333; *color:#333; 
outline:none; } 
/*BASE CLASS*/ 
.cfix { *display:inline-block;*zoom:1} 
.cfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } 
/*公告栏滚动CSS*/ 
#callboard { width:100%; margin:0px auto 0; height:24px; line-height:24px; overflow:hidden; font-size:16px; background-color:#f0f0f0;} 
#callboard ul { padding:0; } 
#callboard li { padding:0; } 
</style> 
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script> 
<div id="callboard"> 
<ul> 
<li style="margin-top: 0px;"> 
<a href="http://zygxsq.kuaizhan.com">公告[1]:欢迎关注资源共享社区</a> 
</li>
<li style="margin-top: 0px;"> 
<span style="color:red;">公告[2]:微信公众号zygxsq</span> 
</li>
<li style="margin-top: 0px;"> 
<span style="color:red;">公告[3]:小小鱼儿小小林</span> 
</li>
</ul> 
</div> 
<!--公告板滚动--> 
<script type="text/javascript"> 
(function (win){ 
var callboarTimer; 
var callboard = $('#callboard'); 
var callboardUl = callboard.find('ul'); 
var callboardLi = callboard.find('li'); 
var liLen = callboard.find('li').length; 
var initHeight = callboardLi.first().outerHeight(true); 
win.autoAnimation = function (){ 
if (liLen <= 1) return; 
var self = arguments.callee; 
var callboardLiFirst = callboard.find('li').first(); 
callboardLiFirst.animate({ 
marginTop:-initHeight 
}, 500, function (){ 
clearTimeout(callboarTimer); 
callboardLiFirst.appendTo(callboardUl).css({marginTop:0}); 
callboarTimer = setTimeout(self, 1000); 
}); 
} 
callboard.mouseenter( 
function (){ 
clearTimeout(callboarTimer); 
}).mouseleave(function (){ 
callboarTimer = setTimeout(win.autoAnimation, 1000); 
}); 
}(window)); 
setTimeout(window.autoAnimation, 1000); 
</script></div>
相关文章
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
|
5月前
|
开发工具 git
大事件项目42---怎么区分,发布还是草稿,下拉菜单的触发时机
大事件项目42---怎么区分,发布还是草稿,下拉菜单的触发时机
|
6月前
|
Android开发
个人热点蓝条出现和消失时,页面下压和恢复导致页面混乱及蓝条下压页面底部控件看不到的问题
个人热点蓝条出现和消失时,页面下压和恢复导致页面混乱及蓝条下压页面底部控件看不到的问题
60 0
|
6月前
左右可以滑动半年的超级日历,支持日历部分收起和自动重定向为北京时间
左右可以滑动半年的超级日历,支持日历部分收起和自动重定向为北京时间
42 0
|
6月前
|
测试技术 iOS开发
蓝条下压和消失导致页面错乱问题解决方案
蓝条下压和消失导致页面错乱问题解决方案
47 0
|
人工智能 JavaScript 前端开发
小程序实现页面多级来回切换支持滑动和点击操作
想留住粉丝,就必须安排演示: [审核中…]然后开摆!!!!首先通过swiper创建一个简单的多tab页面 通过触发pagechange1方法中的事件对currentIndex来进行赋值,又通过currentIndex的改变使前端wxml对应更改,这个部分对滑动和点击的操作都一样,无非就是使currentIndex对应到各自的位置,通过数字来决定位置 这个部分完整代码如下: wxml wxss js 上一步完成后,下级页面再加一个滑动页面,当内切换结束后,在做切换就是父级的切换操作 在“内容1”的vie
269 0
小程序实现页面多级来回切换支持滑动和点击操作
|
前端开发
前端工作总结130-首页样式调整第二次
前端工作总结130-首页样式调整第二次
82 0