<!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>
效果图：
转载于:https://www.cnblogs.com/huanghuali/p/8574406.html
相关资源：Java开发实战1200例(第2卷)(完整版).(清华出版.李钟尉.陈丹丹).part1
