web实现跑马灯

最新推荐文章于 2024-01-31 21:56:38 发布

置顶

VIP文章 Revival_Liang

最新推荐文章于 2024-01-31 21:56:38 发布

阅读量5k

点赞数

分类专栏： web 文章标签： web跑马灯网页跑马灯

本文链接：https://blog.csdn.net/Revival_Liang/article/details/57419058

版权

由于代码比较少，我就写在一个文件里了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.0.min.js" ></script>
		<script type="text/javascript">
		//ready()，这个方法在html元素加载完毕才会执行
			$(document).ready(function(){
				//穿入一个box即可
			startInterval($(".box"));
			function startInterval(box){
			var ul = box.find("ul");
			var height = box.find("ul").find("li").height();
			var value = height;
			var IntervalMethod;
			//克隆主要为了实现无限循环，也是无限循环的核心，其他基础知识不再陈述
			var cloneFirstChild = ul.children().first().clone();
			var liSum = ul.children("li").length;
			ul.append(cloneFirstChild);
			IntervalMethod = setInterval(function(){
				if(height == (liSum+1)*value){
					height = value;

最低0.47元/天解锁文章

优惠劵

Revival_Liang

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
web实现跑马灯

由于代码比较少，我就写在一个文件里了 //ready()，这个方法在html元素加载完毕才会执行 $(document).ready(function(){ //穿入一个box即可 startInterval($(".box")); function startInterval(box){ var ul = box.find("
复制链接

扫一扫