php公告滚动源码,如何利用JavaScriptjQuery实现滚动公告栏（代码实例）

2024-05-09 14:07:03

本篇文章给大家带来的内容是关于如何利用JavaScript&jQuery实现滚动公告栏(代码实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

首先看HTML结构，css样式这里不再给出

・2010考研英语大纲到货75折...
・权威定本四大名著(人民文...
・口述历史权威唐德刚先生国...
・袁伟民与体坛风云：实话实...
・我们台湾这些年：轰动两岸...
・畅销教辅推荐：精品套书50...
・2010版法律硕士联考大纲75...
・计算机新书畅销书75折抢购
・2009年孩子最喜欢的书>>
・弗洛伊德作品精选集59折
・畅销教辅推荐：精品套书50...

js代码

请首先确保已经引入jQuery//滚动字

//确保绝对定位

//使用定时函数

var top=0; var t = setInterval(function () { //先设置margin-top为0

$("#express li:first").css("margin-top",top); //li的高度为25，故这里以25判断第一行是否走出ul。

if(top

top=0; //这句话的意思是，先将首行的top设为0，拷贝该行，放置最后一行

//注意，如果这里不将第一行的top归零，拷贝后他将保持top=-25的状态，效果就是叠加在最后一行上。

$("#express li:first").css("margin-top",top).clone(true).appendTo ('#express'); //移除首行，这时第二行变为首行

$("#express li:first").remove();

}else{ //如果第一行还未走出ul，top自减

top-=1;

}

},50);

额外的代码

实现当滚动时，鼠标放置后可以停止，移出时仍可以进行//当鼠标放置后停止，松开继续走

$("#express li").hover(function() { //清除定时

clearInterval(t);

}, function() {

t = setInterval(function () { //先设置margin-top为0

$("#express li:first").css("margin-top",top); //li的高度为25，故这里以25判断第一行是否走出ul。

if(top

top=0; //这句话的意思是，先将首行的top设为0，拷贝该行，放置最后一行

//注意，如果这里不将第一行的top归零，拷贝后他将保持top=-25的状态，效果就是叠加在最后一行上。

$("#express li:first").css("margin-top",top).clone(true).appendTo ('#express'); //移除首行，这时第二行变为首行

$("#express li:first").remove();

}else{ //如果第一行还未走出ul，top自减

top-=1;

}

},50);

});

以上就是对如何利用JavaScript&jQuery实现滚动公告栏(代码实例)的全部介绍，如果您想了解更多有关JavaScript教程，请关注PHP中文网。

php公告滚动源码,如何利用JavaScriptjQuery实现滚动公告栏（代码实例）相关推荐

在线直播源码，VUE 获奖名单滚动显示的两种方式
在线直播源码,VUE 获奖名单滚动显示的两种方式第一种: 使用vue-seamless-scroll组件: 1.安装vue-seamless-scroll npm install vue-seaml ...
小程序源码：炫酷手持滚动弹幕生成小工具微信小程序-多玩法安装简单
这是一款滚动弹幕生成微信小程序源码让弹幕文字在手机屏幕上跑起来,LED弹幕手机弹幕,告白神奇,等支持多种模板,每一种模板都支持自定义颜色等等字体跳动,字体表白等等另外用户也可以支持自定义文字 ...
小程序源码：炫酷手持滚动弹幕生成小工具
这是一款滚动弹幕生成微信小程序源码让弹幕文字在手机屏幕上跑起来,LED弹幕手机弹幕,告白神奇,等支持多种模板,每一种模板都支持自定义颜色等等字体跳动,字体表白等等另外用户也可以支持自定义文字 ...
[HXBCTF 2021]easywill writeup（WillPHP源码审计+利用pearcmd.php文件包含getshell）
[HXBCTF 2021]easywill writeup(WillPHP源码审计+利用pearcmd.php文件包含getshell) [HXBCTF 2021]easywill 1.WillPHP ...
在线直播系统源码，横向无限循环滚动的单行弹幕效果
在线直播系统源码,横向无限循环滚动的单行弹幕效果实现的相关代码实现思路分析要实现上面的效果,我们先拆分下实现要素: 1.弹幕布局是从屏幕的右侧向左侧滚动,单个弹幕之间的间距是固定的(设计要求) 2 ...
一个公告栏的源码（利用marquee作的）
一个公告栏的源码(利用marquee作的) <MARQUEE οnmοuseοver=this.stop() οnmοuseοut=this.start() scrollAmount=1 scr ...
幼儿园连锁管理系统源码此源码已测试过，可正常运行代码测试完整，界面漂亮，多套皮肤供选择
幼儿园连锁管理系统源码此源码已测试过,可正常运行代码测试完整,界面漂亮,多套皮肤供选择支持短信提醒功能介绍: 一,通知公告管理二,考勤管理考勤查询,考勤统计,考勤设置,考勤干预,考勤分组, ...
龙格库塔法解微分方程组的matlab程序,MATLAB实例源码教程：龙格库塔法求解微分方程组源代码实例.doc...
MATLAB实例源码教程:龙格库塔法求解微分方程组源代码实例.doc MATLAB实例源码教程龙格库塔法求解微分方程组源代码实例题目用经典 Runge-Kutta方法求下列一阶微分方程组的近似解y1 ...
【Android SDM660源码分析】- 04 - UEFI ABL LinuxLoader 代码分析
[Android SDM660源码分析]- 04 - UEFI ABL LinuxLoader 代码分析 1. LinuxLoader.c 系列文章: <[Android SDM660开机流程] ...
小视频app源码，邻接矩阵实现图的相关代码
小视频app源码,邻接矩阵实现图的相关代码 /*Author:Albert Tesla WizardTime:2020/10/26 20:22 */#include<bits/stdc++.h& ...

最新文章

热门文章