<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <style type="text/css"> *{margin:0;padding:0;} body{max-width: 640px; margin: 0 auto; font-family: 'Microsoft Yahei'} em{ font-style: normal; } /*文字滚动*/ .box_notice{ overflow: hidden; height: 35px; line-height: 35px; background-color: #b82828} .bn_left{float: left; box-sizing: border-box; display: block; background-color: #831a1a; width: 35px;height:35px; background: url(images/2_icon_notice.png) no-repeat center center;background-size: 15px 15px; } .bn_words{padding: 0 5px; color: #fff; overflow: hidden;white-space: nowrap; } .bn_words span{ display: inline-block; padding-right: 15px;} .bn_words span em{ padding-right: 5px; display: inline-block;} #scroll_begin,#scroll_end {display: inline;} </style> </head> <body> <div class="box_notice"> <span class="bn_left"></span><div class="bn_words" id="scroll_div"><div id="scroll_begin" class="J_payScroll"></div><div id="scroll_end" class="J_payScroll"></div></div> </div> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // 引导页 公告模块 //跑马灯 // 原理 //1.保证页面上有俩一模一样的容器scroll_begin scroll_end //2.设置一个定时器每隔一段时间让scroll_div的scrollLeft不断增加 //要想滑动不停 scroll_begin的内容宽度必须大于scroll_div的宽度 function ScrollImgLeft(){ var speed=50; var MyMar = null; var scroll_begin = document.getElementById("scroll_begin"); var scroll_end = document.getElementById("scroll_end"); var scroll_div = document.getElementById("scroll_div"); scroll_end.innerHTML=scroll_begin.innerHTML; function Marquee(){ //offsetWidth属性可以返回对象的padding+border+width属性值之和 //向左滚动 if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) scroll_div.scrollLeft-=scroll_begin.offsetWidth; else scroll_div.scrollLeft++; } MyMar=setInterval(Marquee,speed); } ScrollImgLeft(); // 随机生成[0-9]4位数 function randomNum4() { var str = ''; for (var i = 0; i < 4; i++) { str += Math.floor(Math.random() * 9); } return str; } function randomHtml() { var html = ''; var manUser = xingArr[Math.floor(Math.random() * xingArr.length)] + manArr[Math.floor(Math.random() * manArr.length)]; var phone = phoneArr[Math.floor(Math.random() * phoneArr.length)] + '****' + randomNum4(); return '<span><em>' + manUser + '</em>' + phone + '</span>'; } // 随机姓氏、性别 var xingArr = ['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '蒋', '沈', '韩', '杨', '朱', '秦', '许', '何', '吕', '张', '孔', '曹', '严', '金', '谢', '邹', '苏', '潘', '范', '彭', '马', '方', '史', '唐', '雷', '倪', '汤', '毕', '郝', '安', '于', '余', '元', '顾', '孟', '黄', '姚', '祁', '毛']; var manArr = ['先生', '女士'] var phoneArr = [138, 157, 180, 186, 155, 189, 130]; var payScroll = $('.J_payScroll'); var defaultHtml = ''; for (var i = 0; i < 7; i++) { defaultHtml += randomHtml(); } payScroll.html(defaultHtml); }); </script> </body> </html>
效果图：
