首页 > 代码库 > 制作由下向上的滚动字幕，字幕内容要求包含网站超级链接和图片超级链接， 使用鼠标移动事件控制字幕运动和停止。 2、在下拉列表框中设置五种以上颜色，选择颜色后， 滚动字幕背景色改变成相应颜色
制作由下向上的滚动字幕，字幕内容要求包含网站超级链接和图片超级链接， 使用鼠标移动事件控制字幕运动和停止。 2、在下拉列表框中设置五种以上颜色，选择颜色后， 滚动字幕背景色改变成相应颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
时间：2016-12-28
描述：1、制作由下向上的滚动字幕，字幕内容要求包含网站超级链接和图片超级链接，
使用鼠标移动事件控制字幕运动和停止。
2、在下拉列表框中设置五种以上颜色，选择颜色后，
滚动字幕背景色改变成相应颜色
-->
<body style="text-align: center;">
<div id="d" style=" margin-top: 100px; height:90px;overflow:hidden; border: 2px chartreuse;">
<div id="d1">
<a href="http://www.mamicode.com/广告.html" target="_top">广告</a><br>
<a href="http://www.mamicode.com/雪花特效.html">雪花特效</a><br>
<a href="http://www.mamicode.com/节点增删改查.html"><img src="http://www.mamicode.com/img/2.jpg" style="height: 20px; width: 100px;"></a><br>
<a href="http://www.mamicode.com/随机数.html">随机数</a><br>
<a href="http://www.mamicode.com/星空特效.html">星空特效</a><br>
</div>
<div id="d2"></div>
</div>
<form action="" method="post" style="position: relative; padding-top:180px;">
<select onchange="Change(this)">
<option>white</option>
<option>yellow</option>
<option>blue</option>
<option>red</option>
<option>block</option>
</select>
</form>
<script>
var speed=40;
var d1=document.getElementById("d1");
var d2=document.getElementById("d2");
var d=document.getElementById("d")
var top=d.scrollTop;
d2.innerHTML=d1.innerHTML;
function star(){
if(d2.offsetTop-d.scrollTop<=100){
d.scrollTop-=d1.offsetHeight;
}
else{
d.scrollTop++;
}
}
var MyMar=setInterval(star,speed);
d.onmouseover=function() {clearInterval(MyMar)}
d.onmouseout=function() {MyMar=setInterval(star,speed)}
function Change(selObj){
newColor = selObj.options[selObj.selectedIndex].text;
document.bgColor=newColor
}
</script>
</body>
</html>
制作由下向上的滚动字幕，字幕内容要求包含网站超级链接和图片超级链接， 使用鼠标移动事件控制字幕运动和停止。 2、在下拉列表框中设置五种以上颜色，选择颜色后， 滚动字幕背景色改变成相应颜色