<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯</title>
//css部分
<style type="text/css"> #box { height: 30px; width: 800px; line-height: 30px; background-color: pink; white-space: nowrap; /*此属性表示强制不换行哦*/ overflow: hidden;
} #box div { display: inline-block; /*让两个div并排显示*/ } #box span { color: red; font-weight: 900; } </style>
</head><body><div id="print"> <div id="box"> <div id="content1"> <span>通知：</span>客服投诉热线：86-10-58511234 违法和不良信息举报电话：4006609686 客服邮箱：[email protected] 举报邮箱：[email protected] </div> <div id="content2"> <span>通知：</span>客服投诉热线：86-10-58511234 违法和不良信息举报电话：4006609686 客服邮箱：[email protected] 举报邮箱：[email protected] </div> </div></div>
//js部分
<script type="text/javascript"> var oBox = document.getElementById("box"); var oprint = document.getElementById("pront"); var oContent1 = document.getElementById("content1"); var oContent1_width = getCss(oContent1,"width");//获取div id="content1"的宽度 window.setInterval(function () { oBox.scrollLeft ++; var curleft = oBox.scrollLeft; if (curleft > oContent1_width){//当div id="content1"的内容已经到尾部的时候立马又从头开始 oBox.scrollLeft = 0; } },10);//注明：想了解如何快速通过属性名来获取属性值
function getCss(curEle,attr) {}
的方法吗？敬请关注“前端微迅”，回复“代码”获取，扫一扫即可
时间： 2024-10-05 05:21:39