完整的代码, 可以复制引用
实现了一个通知条 (mequeText) 的滚动效果。当页面加载完成后,这个通知条开始从右往左滚动。当鼠标悬停在上面时,它停止滚动,并且当鼠标移出时它重新开始滚动。此外,用户还可以通过鼠标按下并拖动来手动移动这个通知条。
<!DOCTYPE html>;
<html lang="en">;
<head>;
<meta charset="UTF-8">;
<title>;Title</title>;
// 使用内联CSS样式表来样式化页面元素
<style type="text/css">;
// 重置默认的外边距和内边距
*{padding:0;margin:0;}
// 移除列表项前的样式
li{list-style:none;}
// 移除输入框的轮廓线
input{outline:none;}
.ft0{font-size:0;}
.fw{overflow:hidden;}
// 设置meque的样式
#meque{width:1000px;height:30px;line-height:30px;margin:0 auto;overflow:hidden;position:relative;}
#meque_text{white-space:nowrap;position:absolute;left:0;top:0;cursor:pointer;}
</style>;
</head>;
<body>;
<div id="meque">;
<p id="meque_text">;JS 教程 JS 简介 JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用</p>;
</div>;
<script>;
// 使用自执行函数对页面上的元素进行动态操作
(function () {
// 获取需要操作的元素
var mequeText = document.getElementById('meque_text'), // 滚动的文本
meque = document.getElementById('meque'), // 容器元素
timer = null; // 定时器变量,用于控制文本的滚动
// 设置文本初始位置为容器的宽度,使其从右侧开始滚动
mequeText.style.left = meque.offsetWidth + 'px';
// 清除可能存在的定时器
clearInterval(timer);
// 设定定时器,使文本每20毫秒向左移动
timer = setInterval(notice, 20);
// 调用notice函数,开始文本的滚动
notice();
// 定义滚动函数
function notice () {
// 当文本的左侧位置小于其自身宽度的负值时,重新设置其位置到容器的右侧
if (mequeText.offsetLeft < -mequeText.offsetWidth) {
mequeText.style.left = meque.offsetWidth + 'px';
}
// 文本向左移动2px
mequeText.style.left = mequeText.offsetLeft + -2 +'px';
}
// 当鼠标悬停在文本上时,停止滚动
mequeText.onmouseover = function () {
clearInterval(timer);
};
// 当鼠标移出文本时,重新开始滚动
mequeText.onmouseout = function () {
timer = setInterval(notice, 20);
};
// 当在文本上按下鼠标时,可以拖动文本
mequeText.onmousedown = function (ev) {
var ev = ev || window.event; // 获取事件对象
var disX = ev.clientX - this.offsetLeft; // 计算鼠标按下时的位置与文本左侧的距离
// 当鼠标移动时,文本跟随鼠标移动
mequeText.onmousemove = function (ev) {
var ev = ev || window.event;
mequeText.style.left = ev.clientX - disX + 'px';
};
// 当鼠标释放时,停止文本的拖动
document.onmouseup = function () {
mequeText.onmousemove = null;
}
}
})();
// 使用jQuery的ready方法等待文档准备就绪
$(function () {
// 获取数据并更新页面内容
$.getJSON("/data/json/notice.json";, function (response) {
$('.marNote').html(response.roll_notice.noticeContent)
})
})
</script>;
</body>;
</html>;