【实测】兔源码实测分享DIY向上自动滚动切换的公告代码

来自版块: DIV模块素材发表于: 2021-3-15 10:45:10

12000

0

如本资源下载地址失效,请点击此处进行反馈

开通本站Svip会员，全站资源免费下

演示图：

QQ截图20210315104402.png

DIV部分：

<div class="notice">
<ul>
[loop]<li><a href="{url}" {target}>{title}</a></li>[/loop]
</ul>
</div>

复制代码

CSS部分：

<style>
div,ul,li{margin: 0;padding: 0}/*先初始化一下默认样式*/
.notice {
width: 300px;/*单行显示，超出隐藏*/
height: 35px;/*固定公告栏显示区域的高度*/
padding: 0 30px;
background-color: #b3effe;
overflow: hidden;
}
.notice ul li {
list-style: none;
line-height: 35px;
/*以下为了单行显示，超出隐藏*/
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>

复制代码

JS部分：

<script src="noticeUp.js"></script>
<script>
var jq=jQuery.noConflict();
jq(function () {
// 调用公告滚动函数
setInterval("noticeUp('.notice ul','-35px',500)", 2000);
});
function noticeUp(obj,top,time) {
jq(obj).animate({
marginTop: top
}, time, function () {
jq(this).css({marginTop:"0"}).find(":first").appendTo(this);
})
}
</script>

复制代码

CSS样式进行了简单的设置，需要更精美样式的话，请自行编写！
【注：需要调用jquery.min.js，否则js效果无法生效】

实测，分享，DIY，自动，滚动，切换，公告，代码

回复

全部评论 0

期待你的评论哦~

教程 / CSS+DIV素材

Discuz教程
CSS+DIV素材

返回版块

0

0

0