web前端：jq，bootstrap
颛孙建业
呼吸灯：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
* {
padding: 0;
margin: 0;
}
img {
display: block; /*转换块级元素*/
}
ul li {
list-style: none;
}
/*清浮动的衣服*/
.clearFix::after,.clearFix::before {
content: '';
display: block;
line-height: 0;
clear: both;
}
.Photo-frame {
position: relative;
width: 590px;
height: 470px;
border: 1px solid #ccc;
margin: 100px auto;
/*溢出隐藏*/
overflow: hidden;
}
/*照片条*/
/*.picBox {
!*定位*!
position: absolute;
width: 2950px;
height: 470px;
top:0;
}*/
.picBox > li {
position: absolute;
left: 0;
top:0;
/*隐藏*/
display: none;
}
.arrow {
position: absolute;
top:50%;
margin-top: -20px;
width: 24px;
height: 40px;
background-color: rgba(45,45,45,.3);
color: #fff;
line-height: 40px;
text-align: center;
font-size: 25px;
cursor: pointer;/*鼠标小手样式*/
}
#next {
right: 0;
}
#prev {
left: 0;
}
.arrow:hover {
background-color: rgba(45,45,45,.7);
}
/*小圆点*/
.circles {
position: absolute;
bottom:20px;
left: 50%;
margin-left:-76px ;
height: auto;
}
.circles span { /*10+1 =11*/
display: inline-block;
box-sizing: border-box;
width: 14px;
height: 14px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
background-color: darkblue;
}
/*
.circles span:hover {
box-shadow: 0 0 10px 5px rgba(255,255,255,.7) inset;
}*/
/*白色衣服 on 加大权重 把上面权重大的选择器 直接粘贴到下面衣服前 交集选择器不能有空格 */
.circles span.on { /*10+10+1 = 21*/
background-color: #fff;
}
</style>
</head>
<body>
<!--相框-->
<div class="Photo-frame">
<!--照片条-->
<ul class="picBox clearFix" style="left: 0">
<li style="display: block">
<a href="#"><img src="images/zhutu1.jpg" alt="">
</a></li>
<li><a href="#"><img src="images/zhutu3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/zhutu6.jpg" alt=""></a></li>
</ul>
<!--指示 小圆圈-->
<div class="circles">
<span in="0" class="on"></span>
<span in="1"></span>
<span in="2"></span>
<span in="3"></span>
<span in="4"></span>
</div>
<!--箭头 next 右箭头-->
<div class="arrow" id="next"> > </div>
<!--左箭头-->
<div class="arrow" id="prev"> < </div>
</div>
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
//点击右箭头 下一张淡入 其余兄弟淡出
var index = 0; //当前播放图片的下标
$('#next').click(function () {
index++; //1 第二张
if(index===5){
index = 0;
}
//下一张图片淡入 其他兄弟淡出
$('.picBox li').eq(index).fadeIn(1000).siblings().fadeOut(1000)
buttonShow()
});
$('#prev').click(function () {
index--; //1 第二张
if(index===-1){
index = 4;
}
$('.picBox li').eq(index).fadeIn(1000).siblings().fadeOut(1000)
buttonShow()
});
//2:自动播放
function play() {
timer = setInterval(function () {
//切换下一张
$('#next').click()
},2000)
}
play();
/*相框 鼠标移入 移出事件 jquery 方法*/
$('.Photo-frame').mouseover(function () {
clearInterval(timer)
})
$('.Photo-frame').mouseout(function () {
play()
})
//小圆点切换白色背景函数
function buttonShow() {
//排他 所有小圆点先全脱掉on的类样式 当前对应播放小圆点加上
$('.circles span').removeClass('on');
$('.circles span').eq(index).addClass('on')
}
//鼠标移入圆点切换相应图片 当前鼠标移入的小圆点对应的图片淡入 其他兄弟淡出
$('.circles span').mouseover(function () {
//小圆圈身上 in
var imgIndex = $(this).attr('in')
$('.picBox li').eq(imgIndex).fadeIn(1000).siblings().fadeOut(1000)
index = imgIndex; //新旧替换
buttonShow()
})
})
</script>
</body>
</html>
节点操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
</head>
<body>
<button>创建一个标签</button>
<button>删除元素</button>
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
//1:节点的创建 $('<div></div>')
var $btn = $('button:first')
$btn.click(function () { /*异步*/
console.log('safdsgf')
var obj = $('<div></div>').html('我是div元素').css({width:'200px',height:'200px',
backgroundColor:'red',margin:"0 auto"
}).attr('class','box')
//尾插内容 父子关系 内部插入
/* $(document.body).append(obj)*/
/* obj.appendTo($(document.body))*/
console.log(obj)
/*前插 prepend() prependTo()*/
/* obj.prependTo($(document.body))*/
/*外部插入 兄弟关系 after() before() */
$btn.after(obj)
})
$('button:last').click(function () {
//empty() 删除父元素内部内容 通通全删除
/* $(document.body).empty() 不具备挑选功能*/
$('.box').remove() //remove()带父元素和内容全部删除
})
});
</script>
</body>
</html>
省市联动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
form {
margin: 100px auto;
width: 400px;
}
</style>
</head>
<body>
<form action="">
<!--省-->
<select name="province" id="province">
</select>
<!--市-->
<select name="city" id="city">
</select>
</form>
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
//初始化 界面一加载 只显示一个省和这个省对应的一个市
var provinces = ['北京','河南省','河北省','广东省'] //省
var cities = [['朝阳区','海淀区','大兴区'],['洛阳市','开封市','郑州市'],['张家口市','石家庄市','保定市'],
['东莞市','珠海市','深圳市'] ];
var $pro = $('#province')
var $cities = $('#city')
//用户点击省份 城市下拉列表 改变事件 change()
$pro.change(function () {
//显示对应的市
$cities.empty();
//被用户选中那个 :selected
/* console.log($(this))*/ //省
var index = $('#province option:selected ').attr('a');
console.log(index)
//循环城市数组 找到下标对应的元素 --->数组 遍历数组 + option 追加到第二个select里就可以
for(var i =0;i<cities[index].length;i++){
$cities.append( $('<option></option>').text(cities[index][i]))
}
//1：加载省的对应的市 获取下标
/*for(var i = 0;i<cities.length;i++){
$pro.append($('<option></option>').text(provinces[i]))
}*/
})
//初始化函数 参数:无 返回值 无
function init() {
//省份加载一个数据 provinces[0]
//市加载 cities[0][0] --->朝阳
for(var i = 0;i<provinces.length;i++){
$('<option></option>').text(provinces[i]).attr('a',i).appendTo($pro)
}
$('<option></option>').text(cities[0][0]).appendTo($cities)
}
init();
});
</script>
</body>
</html>
评论案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
.criticism {
width: 600px;
height: auto;
border: 5px double skyblue;
margin: 100px auto;
box-sizing: border-box;
padding: 40px;
}
.criticism ul li {
line-height: 40px;
border-bottom: 1px dashed #000;
list-style: none;
}
.criticism textarea {
font-size: 16px;
}
</style>
</head>
<body>
<div class="criticism">
<span>微博发布</span>
<textarea name="" id="txt" cols="45" rows="16" style="resize: none"></textarea>
<button id="publish">发布</button>
<ul id="list">
</ul>
</div>
<script src="jquery-3.0.0.js" type="text/javascript"></script>
<script>
$(function () {
//点击发布按钮 获取用户输入 判断合不合法 （空串）如果合法 追加到ul里面去 包裹li元素
$('#publish').click(function () {
if(!$.trim($('#txt').val())){ //$.trim(‘字符串’)去掉字符串起始和结尾的空格。
//是个空串
alert('请输入有效评论!')
return false ;
}else {
var str = $.trim($('#txt').val());
$('#list').prepend($('<li></li>').text(str)) ;
$('#txt').val(' ') //点击之后将文本域置空
return true ;
}
})
});
</script>
</body>
</html>
弹幕：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-family: "微软雅黑";
font-size: 62.5%; /*100% 14px 62.5% 10px */
}
.boxDom {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.idDom {
width: 100%;
height: 100px;
background: #666;
position: fixed;
bottom: 0px;
}
.content {
display: inline-block;
width: 430px;
height: 40px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
.title {
display: inline;
font-size: 4em;
vertical-align: bottom;
color: #fff;
}
.text {
border: none;
width: 300px;
height: 30px;
border-radius: 5px;
font-size: 2.4em;
}
.btn {
width: 60px;
height: 30px;
background: #f90000;
border: none;
color: #fff;
font-size: 2.4em;
}
span {
width: 300px;
height: 40px;
position: absolute;
overflow: hidden;
color: #000;
font-size: 4em;
line-height: 1.5em;
cursor: pointer;
/*不换行 强制一行显示*/
white-space: nowrap;
}
#idDom span {
position: absolute;
}
</style>
</head>
<body>
<!--span 评论 放在boxDom身上-->
<div class="boxDom" id="boxDom">
<div class="idDom" id="idDom">
<div class="content">
<p class="title">吐槽:</p>
<input type="text" class="text" id="text"/>
<button type="button" class="btn" id="btn">发射</button>
</div>
</div>
</div>
<script src="jquery-3.0.0.js"></script>
<script>
$(function () {
//文本框
var $textBox = $('#text')
var $btn = $('.btn')
var $boxDom = $('#boxDom')
//1:绑定点击事件
$btn.click(function () {
//获取文本内容
var txt = $textBox.val()
//随机颜色 颜色数组 随机高度 top 区间
//随机高度 区间 50-450px
var RanNum = Math.floor( Math.random()*400+50 )
//随机颜色
var ColorStr = CreateColor();//产生随机颜色
//动起来 动画函数 animate()
$boxDom.append( $('<span></span>').text(txt)
.css({'color':ColorStr,left:'1700px'})
.css({top:RanNum+'px'})
.animate({left:'-1000px'},5000,'linear',function () {
//动画结束 清除当前节点 span $(this) 当前左动画的元素
$(this).remove() ;
})
)
$textBox.val('')
console.log($textBox[0])
})
//事件对象 e
//文本框绑定一个键盘抬起 检测抬起的是enter 立即$btn.click()
$textBox.keyup(function (e) {
console.log(e.keyCode)
if(e.keyCode === 13){ //enter 键的键码13
$btn.click()
}
})
//产生颜色
function CreateColor() {
var colorArr = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']
var str = '#'
for(var i =0;i<6;i++){
var num = Math.ceil(Math.random()*15) //0 -15 4
str+=colorArr[num]
}
return str ;
}
});
</script>
</body>
</html>
bootstrap：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<!--meta 元标签 视口 viewport 移动端 视口 --》呈现网页 pC 浏览器直接呈现网页 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
mark {
background-color: gold;
}
.table {
/*width: 50%;
margin: 0 auto;*/
}
tr td {
text-align: center;
}
</style>
</head>
<body>
<!--基于jquery-->
<span class="h1">萨尔王分 积分惹我</span>
<p class="text-center">safbreg reg</p>
<p class="lead">awgfrehg</p>
You can use the mark tag to <mark>highlight</mark> text.
You can use the mark tag <abbr title="attribute">attr</abbr>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th>学号</th>
<th>姓名</th>
<th>地址</th>
</tr>
<tr>
<td>1001</td>
<td>花花</td>
<td>地球街38号</td>
</tr>
<tr>
<td>1001</td>
<td>花花</td>
<td>地球街38号</td>
</tr>
<tr>
<td>1001</td>
<td>花花</td>
<td>地球街38号</td>
</tr>
</table>
</div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<script src="jquery-3.0.0.js"></script>
<script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>
响应式图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<!--meta 元标签 视口 viewport 移动端 视口 --》呈现网页 pC 浏览器直接呈现网页 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.box {
width: 50%;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
}
</style>
</head>
<body>
<!--基于jquery-->
<div class="box">
<img src="images/samll.jpg" alt="" class="img-responsive center-block">
</div>
<script src="jquery-3.0.0.js"></script>
<script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>
模态框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<!--meta 元标签 视口 viewport 移动端 视口 --》呈现网页 pC 浏览器直接呈现网页 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
form {
padding: 20px;
}
</style>
</head>
<body>
<!--基于jquery-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
登录
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<script src="jquery-3.0.0.js"></script>
<script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
轮播图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<!--meta 元标签 视口 viewport 移动端 视口 --》呈现网页 pC 浏览器直接呈现网页 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
form {
padding: 20px;
}
#carousel-example-generic {
width: 100%;
height: 400px;
margin: 0 auto;
}
.carousel-inner .item img {
width: 100%;
height: 400px;
}
.navbar {
min-height: 80px;
margin-bottom: 0px;
padding-top: 15px;
padding-left: 50px;
}
.navbar-default {
background-color: #202026;
border-bottom: 1px solid #000;
}
.navbar-default .navbar-nav > li > a:hover {
color: #fff;
}
</style>
</head>
<body>
<!--基于jquery-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" >
<!-- Indicators 小圆圈-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/zhutu1.jpg" alt="..." class="img-responsive">
<div class="carousel-caption">
第一张
</div>
</div>
<div class="item">
<img src="images/zhutu3.jpg" alt="..." class="img-responsive">
<div class="carousel-caption">
第二张
</div>
</div>
<div class="item">
<img src="images/zhutu4.jpg" alt="..." class="img-responsive">
<div class="carousel-caption">
第三张
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="jquery-3.0.0.js"></script>
<script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>
类似资料：