一、弹幕
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css1.css"/>
<title>弹幕</title>
<script src="../jquery.js"></script>
<script>
$(function(){
$("#danmu").click(function(){
$('.barrage').toggle();
});
$(".barrage-send").click(function(){
var $txt=$('<div>'+$(".barrage-txt").val()+'</div>');
$('.show').append($txt);
var h=Math.floor(Math.random()*$(".barrage").height());
$('.show div:last').css("top",h).animate({right:$('.barrage').width()},10000,function(){
$('this').remove();
});
$(".barrage-txt").val(' ');
});
});
</script>
</head>
<body>
<center>
<a href="" id="danmu">弹幕区域</a>
</center>
<div class="barrage">
<div class="show">
</div>
</div>
<div class="barrage">
<input type="text" class="barrage-txt"
placeholder="请输入弹幕内容">
<input type="button" value="发布评论" class="barrage-send">
</div>
</body>
</html>
css代码:
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
border:0;
}
.barrage {
width:600px;
height:230px;
margin:0 auto;
position:relative;
}
.barrage .show {
width:100%;
height:100%;
background:#000;
opacity:0.5;
position:absolute;
top:0;
left:0;
}
.barrage .show div {
color:#fff;
white-space: nowrap;
position:absolute;
right:0;
}
.barrage-txt {
width:70%;
background-color:#ccc;
}
.barrage-send {
width:25%;
cursor:pointer;
}
结果:
二、滚动弹幕
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css1.css"/>
<title>小苹果</title>
<script src="../jquery.js"></script>
<script>
$(function(){
setInterval(function(){
$('.apple ul').animate({marginTop: "-50px"},500,function(){
$(this).children(':first').appendTo(this);
$(this).css('margin-top','0px');
})
},2000);
});
</script>
</head>
<body>
<div class="apple">
<ul>
<li><a href="#">你是我的小丫小苹果 </a></li>
<li><a href="#">怎么爱你都不嫌多</a></li>
<li><a href="#">红红的小脸儿温暖我的心窝 </a></li>
<li><a href="#">点亮我生命的火 火火火火</a></li>
<li><a href="#">你是我的小丫小苹果 </a></li>
<li><a href="#">就像天边最美的云朵</a></li>
<li><a href="#">春天又来到了花开满山坡 </a></li>
<li><a href="#">种下希望就会收获</a></li>
</ul>
</div>
</body>
</html>
css代码:
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
font-family:'微软雅黑';
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
li {
list-style:none
}
a {
text-decoration:none;
}
.apple {
width:500px;
height:50px;
overflow:hidden;
margin:30px auto;
border:1px solid #1B96EE;
}
.apple ul {
height:50px;
}
.apple a{
width:100%;
height:50px;
line-height:50px;
color:#1B96EE;
display:block;
text-align:center;
font-size:25px;
}
结果:
三、列表的增删和移动
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css1.css"/>
<title>列表的增删和移动</title>
<script src="js1.js"></script>
<script src="../jquery.js"></script>
<script>
$(function(){
<!--添加项目-->
$('span.list-add-show').click(function(){
alert('123');
$('div.list-add-area').removeClass('list-hide');
});
<!--隐藏项目-->
$('#btn2').click(funcction(){
$('div.list-add-area').addClass('list-hide');
});
<!--添加元素-->
$('#btn1').click(function(){
var $li=$(' <li class="list-option"><input class="list-input" type="text" ><span class="list-btn"><span class="list-up">[上移]</span><span class="list-down">[下移]</span>
<span class="list-del">[删除]</span></span></li>')
$('ul.list-ul').append($li);
$('input.list-input:last').val($('input.list-add-input').val());
});
<!--上移-->
$('span.list-up').click(function(){
var $li= $(this).parents('li');
$li.prev().before($li);
});
<!--下移-->
$('span.list-up').click(function(){
var $li= $(this).parents('li');
$li.prev().after($li);
});
<!--删除-->
$('span.list-up').click(function(){
var $li= $(this).parents('li');
$li.prev().remove($li);
});
});
</script>
</head>
<body>
<form>
<div class="list">
<ul class="list-ul">
<li class="list-option">
<input class="list-input" type="text" value="HTML+CSS">
<span class="list-btn">
<span class="list-up">[上移]</span>
<span class="list-down">[下移]</span>
<span class="list-del">[删除]</span>
</span>
</li>
<li class="list-option">
<input class="list-input" type="text" value="JavaScript">
<span class="list-btn">
<span class="list-up">[上移]</span>
<span class="list-down">[下移]</span>
<span class="list-del">[删除]</span>
</span>
</li>
<li class="list-option">
<input class="list-input" type="text" value="c">
<span class="list-btn">
<span class="list-up">[上移]</span>
<span class="list-down">[下移]</span>
<span class="list-del">[删除]</span>
</span>
</li>
</ul>
<div class="list-bottom">
<span id="show" class="list-add-show"><span>添加项目</span></span>
<div id="div1" class="list-add-area list-hide">
添加到列表:
<input class="list-add-input" type="text" name="list[]">
<input id="bt1" class="list-add-add" type="button" value="添加">
<input id="bt2" class="list-add-cancel" type="button" value="取消">
</div>
</div>
</div>
</form>
</body>
</html>
css代码:
@charset "utf-8";
/* CSS Document */
<style>
body{background:#ddd;text-align:center}
.list{display:inline-block;margin-top:20px;padding:40px;border-radius:8px;background:#fff;color:#333;text-align:left;font-size:13px}
.list-ul{list-style:none;margin:0;padding:0}
.list-option{padding:6px 0;}
.list-input{width:300px;border:1px solid #ccc;padding:4px;font-size:14px;color:#333}
.list-input:hover{background:#effaff}
.list-btn span{color:#0065A0;;cursor:pointer}
.list-btn span:hover{text-decoration:underline}
.list-btn b{text-align:center;background-color:#D6EDFF;border-radius:6px;width:20px;height:20px;display:inline-block;margin:0 2px;cursor:pointer;color:#238FCE;border:1px solid #B3DBF8;float:left}
.list-bottom{margin-top:5px}
.list-add-show{color:#f60;cursor:pointer}
.list-add-show:before{position:relative;top:1px;margin-right:5px;content:"+";font-weight:700;font-size:16px;font-family:arial}
.list-add-show span:hover{text-decoration:underline}
.list-add-area{margin-top:5px}
.list-add-add{cursor:pointer;margin-left:5px}
.list-add-cancel{cursor:pointer;margin-left:4px}
.list-add-input{width:180px;border:1px solid #ccc;padding:4px;font-size:14px;color:#333}
.list-add-input:hover{background:#effaff}
.list-tmp{display:none}
.list-hide{display:none}
</style>
结果: