CSS3
CSS选择器
1.元素选择器
* E E#id E.class
2.关系选择器
E F (后代选择器)
E > F (子代选择器)
E + F (相邻选择器)
E ~ F (兄弟选择器)
3.属性选择器
E [att] (选择具有att属性的E元素)
E [att="val"] (选择具有att属性且属性值等于val的E元素)
E [att~="val"] (选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素)
E [att^="val"] (选择具有att属性且属性值为以val开头的字符串的E元素)
E [att$="val"] (选择具有att属性且属性值为以val结尾的字符串的E元素)
E [att*="val"] (选择具有att属性且属性值为包含val的字符串的E元素)
E [att|="val"] (选择具有att属性，其值是以val开头并用连接符"-"分隔的字符串的E元素；
如果值仅为val，也将被选择)
4.伪类选择器
E:link (设置超链接a在未被访问前的样式)
E:visited (设置超链接a在其链接地址已被访问过时的样式)
E:hover (设置元素在其鼠标悬停时的样式)
E:active (设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式)
'注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后'
E:focus (设置对象在成为输入焦点时的样式)
E:lang(fr) (匹配使用特殊语言的E元素)
E:not(s) (匹配不含有s选择符的元素E)
E:root (匹配E元素在文档的根元素)'在HTML中，根元素永远是HTML'
E:first-child (匹配父元素的第一个子元素E)
'注'
'<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>'
'在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}，
而不是ul:first-child{sRules}'
E:last-child (匹配父元素的最后一个子元素E)
E:only-child (匹配父元素仅有的一个子元素E)
E:nth-child(n) (匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效)
E:nth-last-child(n) (匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效)
E:first-of-type (匹配父元素下第一个类型为E的子元素)
E:last-of-type (匹配父元素下的所有E子元素中的倒数第一个)
E:only-of-type (匹配父元素的所有子元素中唯一的那个子元素E)
E:nth-of-type(n) (匹配父元素的第n个子元素E)
E:nth-last-of-type(n) (匹配父元素的倒数第n个子元素E)
E:empty (匹配没有任何子元素（包括text节点）的元素E)
E:checked(匹配用户界面上处于选中状态的元素E)(用于input type为radio与checkbox时)
E:enabled (匹配用户界面上处于可用状态的元素E)
E:disabled (匹配用户界面上处于禁用状态的元素E)
E:target (匹配相关URL指向的E元素)
5.伪对象选择器
E:first-letter/E::first-letter (设置对象内的第一个字符的样式)
E:first-line/E::first-line (设置对象内的第一行的样式)
E:before/E::before (设置在对象前发生的内容。用来和content属性一起使用，'并且必须定义content属性')
E:after/E::after (设置在对象后发生的内容。用来和content属性一起使用，'并且必须定义content属性')
E::selection (设置对象被选择时的样式)
CSS文本字体
1.text-shadow:5px 6px 10px red; 文本阴影 阴影水平偏移量 阴影垂直偏移量 阴影模糊值 颜色
2.单行文本溢出
{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
3.@font-face 网络字体(例如iconfont)
边框圆角与阴影
border-radius (边框圆角)(圆50%)
box-shadow:5px 6px 10px red; 阴影水平偏移量 阴影垂直偏移量 阴影模糊值 颜色
五环
利用::after和border-radius制作五环
<style>
*{
margin: 0;
padding: 0;
}
.circle{
width: 200px;
height: 200px;
border:10px solid #000;
border-radius: 50%;
position: absolute;
}
.circle::after{
content:"";
width: 200px;
height: 200px;
border:10px solid pink;
display: block;
border-radius: 50%;
position: absolute;
left:-10px;
top:-10px;
z-index: 1;
}
.blue{
border-color: blue;
left:0;
top:0;
}
.blue::after{
border-color: blue;
}
.black{
border-color: #000;
top:0px;
left:230px;
}
.black::after{
border-color: black;
border-left-color: transparent;
}
.red{
border-color: red;
top:0px;
left:460px;
}
.red::after{
border-color: red;
border-left-color: transparent;
}
.green{
border-color: green;
top:110px;
left:340px;
}
.green::after{
border-color: green;
border-top-color: transparent;
border-right-color: transparent;
}
.yellow{
border-color: yellow;
top:110px;
left:110px;
}
.yellow::after{
border-color: yellow;
border-top-color: transparent;
border-right-color: transparent;
}
</style>
<body>
<div class="circle blue"></div>
<div class="circle black"></div>
<div class="circle red"></div>
<div class="circle green"></div>
<div class="circle yellow"></div>
</body>
颜色
rgba(255,255,255,0.7) (最后值为透明度，前三个值为0~255)
背景
1.background-origin(指定的背景图像计算的原点)
'默认值：padding-box ,
border-box：从border区域（含border）开始显示背景图像。
padding-box：从padding区域（含padding）开始显示背景图像。
content-box：从content区域开始显示背景图像。'
2.background-clip(指定对象的背景图像向外裁剪的区域)
'默认值：border-box ,
border-box：从border区域（含border）开始向外裁剪背景。
padding-box：从padding区域（含padding）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。'
3.background-size
'background-size: cover;将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
background-size: contain;将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，
背景图像始终被包含在容器内。
background-size:400px 200px;
background-size:100%;按比例'
4.background:url(http://css.doyoe.com/properties/backgrounds/skin/p_103x196_1.jpg) 0 0 no-repeat;
'url图片引入 第二个第三个值为定位 第四个为是否重复'
弹性盒模型
display:flex; 弹性盒模型
flex:1;(占父元素剩余部分的份数)(父元素设置display:flex; 子元素设置flex)
flex-direction 设置或检索伸缩盒对象的子元素在父容器中的位置。
'默认值：row
row:横向从左到右排列（左对齐）
row-reverse:对齐方式与row相反。
column:纵向从上往下排列（顶对齐）
column-reverse:对齐方式与column相反'
flex-wrap 设置或检索伸缩盒对象的子元素超出父容器时是否换行。
align-items 设置或检索弹性盒子元素垂直对齐方式。
'默认值：stretch
flex-start：居上。
flex-end：居下。
center：居中。
baseline：基线对齐。
stretch：拉伸'
justify-content 设置或检索弹性盒子元素水平对齐方式。
'默认值：flex-start
flex-start：居左
flex-end：居右
center：居中
space-between：两边无空，中间平均分
space-around：两边有空，平均分'
变形
transform:translate() ;位移
transform:translatex();x轴位移
transform:translatey();y轴位移
transform:translatez();z轴位移
transform:rotate(30deg);旋转(顺时针)
transform:rotatex();x轴旋转
transform:rotatey();y轴旋转
transform:rotatez();z轴旋转
transform:scale();缩放
transform:skew();扭曲
transform-origin:right bottom;旋转
旋转立方体
<style>
body{
background: #000000;
perspective: 800px;
}
#container{
width: 200px;
height: 200px;
margin:200px auto;
/* background: #ff0000; */
/* border: 1px dotted #fff; */
position: relative;
transform-style: preserve-3d;
animation: run 2s linear infinite ;
}
@keyframes run {
100%{
transform: rotateY(360deg);
}
}
#container div{
width: 200px;
height: 200px;
background: rgba(255,255,255,0.5);
border-radius: 10px;
font-size: 50px;
text-align: center;
line-height: 200px;
position: absolute;
left:0px;
top:0px;
}
.one{
transform: rotateY(-90deg) translateZ(100px) ;
}
.two{
transform: rotateY(90deg) translateZ(100px) ;
}
.three{
transform: rotateX(90deg) translateZ(100px);
}
.four{
transform: rotateX(-90deg) translateZ(100px);
}
.five{
transform: rotateY(180deg) translateZ(100px);
}
.six{
transform: translateZ(100px);
}
</style>
<body>
<div id="container">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</div>
</body>
动画
transition: width 2s linear 2s;
/* 过度 属性 执行时间 运动方式 延迟时间 */
animation: run 2s ease 2s infinite forwards;
/*动画名称 执行时间 运动方式 延迟时间 循环次数 动画结束后状态*/
@keyframes run {
30%{
width:800px;
}
50%{
width:200px;
}
100%{
width:1000px;
}
}
左侧固定右侧自适应
1.弹性盒模型
左侧将宽写死 父元素display:flex; 子元素自适应元素flex:1;
2.浮动
利用浮动将子元素中左侧元素宽高写死 子元素右侧用margin-left将左侧子元素空出 右侧写出高即可
3.定位
利用定位将子元素中左侧元素宽高写死定位到左侧 子元素右侧用margin-left将左侧子元素空出 右侧写出高即可
4.利用margin-top
左侧元素正常将宽高写死 右侧元素利用margin-top上移,用margin-left将左侧子元素空出 右侧写出高即可
水平垂直居中
1.利用定位实现
利用定位position:absolute;left:50%;top:50%;这样不会是水平居中，只会使左上角的点水平居中
再用margin-left=-width/2 margin-top=-height/2 实现
2.利用弹性盒模型
在父元素身上设置display: flex;
justify-content: center;/* 水平 */
align-items: center;/* 垂直 */
响应式
<!-- 页面宽度 = 设备款速 初始缩放比例1 允许用户缩放到的最大比例 允许用户缩放到的最小比例 用户是否可以手动缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0 , maximum-scale=1, minimum-scale=1" user-scalable=no">
/* >=980 red */
@media (min-width: 980px) {
#div1{
background:red;
}
}
/* <=768 yellow */
@media (max-width: 768px) {
#div1{
background:yellow;
}
}
@media screen and (max-width:480px){ //screen屏幕
#div1{
background: #eee;
}
}
小海豹
*{
margin: 0;
padding: 0;
}
h3{
width: 960px;
height: 100px;
background: #cccccc;
margin:20px auto;
text-align: center;
line-height: 100px;
}
#img-box{
width: 960px;
height: 540px;
background: url(img/01.jpg) 0 0 no-repeat;
background-size:100%;
margin:0 auto;
}
#content{
width: 960px;
margin:0 auto;
overflow: hidden;
}
/* 多行文本垂直居中
父元素display:table
子元素display:table-cell;
vertical-align:middle
*/
#left{
float: left;
width: 630px;
height: 300px;
background: plum;
display: table;
}
#left p{
display: table-cell;
vertical-align: middle;
}
#right{
float:right;
width: 300px;
height: 300px;
background: aquamarine;
}
@media screen and (max-width:960px){
h3{
width:100%;
}
#img-box{
width:100%;
background-image: url(img/01_s_2x.jpg);
height:0px;
padding-top:56%;
}
#content{
width: 100%;
}
#left{
width:66%;
}
#right{
width:31%;
}
}
@media screen and (max-width:480px){
#img-box{
background-image: url(img/01_s.jpg);
}
#left{
width:100%;
}
#right{
width:100%;
}
}
<body>
<h3>页头</h3>
<h3>标题</h3>
<div id="img-box">
</div>
<div id="content">
<div id="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero sit amet sapien dictum, quis bibendum mi volutpat. Cras pretium quam quis magna facilisis, eget feugiat nisi lacinia</p>
</div>
<div id="right"></div>
</div>
<h3>标题</h3>
</body>
移动端样式自适应
1.百分比
2.弹性盒模型
3.rem(rem 相对于html元素（根元素）的字体大小)
' //320/6.4 html的fontsize = 50
// 640/6.4 html的fontsize = 100
// 1份为1rem'
美团
*{
margin: 0;
padding: 0;
}
body{
font-size:16px;
background: hsl(40, 9%, 94%);
}
ul{
list-style: none;
}
#nav{
display: flex;
background: #06c1ae;
}
.nav-add{
width:1.67rem;
height:1.01rem;
line-height: 1.01rem;
text-align: center;
color:#fff;
}
.nav-mine{
width:0.94rem;
height:1.01rem;
line-height: 1.01rem;
text-align: center;
color:#fff;
}
.nav-search{
flex:1;
height:0.64rem;
background: #00a494;
border: none;
outline: none;
border-radius: 5px;
color:#68dbce;
margin-top:0.2rem;
}
.menu-list{
display: flex;
flex-wrap: wrap;
background: #fff;
}
.menu-list li{
width:20%;
/* height: 100px; */
/* background: blueviolet; */
}
.list-img{
width:0.8rem;
height:0.8rem;
background: orange;
border-radius: 50%;
margin: 0 auto;
}
.list-title{
text-align: center;
font-size: .24rem;
color: #666;
}
.pro-list-box{
background: #fff;
margin-top:10px;
padding-left:0.2rem;
}
.pro-list-box h2{
height: 0.84rem;
line-height: 0.84rem;
font-size: .34rem;
color: #333;
font-weight: normal;
border-bottom:1px solid #DDD8CE;
}
.pro-list{
padding:0.2rem 0;
display: flex;
}
.pro-list-img{
width:1.8rem;
height: 1.8rem;
margin-right:0.2rem;
}
.pro-list-info{
flex:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../rem.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--
750
1rem = 50px
750/2/50
750/100
100/100 = 1rem
750/100 = 7.5rem
300/100 = 3rem;
-->
<div id="nav">
<div class="nav-add">哈尔滨</div>
<input class="nav-search" placeholder="输入商家/品类/商圈" type="text">
<div class="nav-mine">我的</div>
</div>
<ul class="menu-list">
<li>
<div class="list-img"></div>
<p class="list-title">美食</p>
</li>
<li>
<div class="list-img"></div>
<p class="list-title">美食</p>
</li>
<li>
<div class="list-img"></div>
<p class="list-title">美食</p>
</li>
<li>
<div class="list-img"></div>
<p class="list-title">美食</p>
</li>
<li>
<div class="list-img"></div>
<p class="list-title">美食</p>
</li>
<li>
<div class="list-img"></div>
<p class="list-title">美食</p>
</li>
<li>
<div class="list-img"></div>
<p class="list-title">美食</p>
</li>
<li>
<div class="list-img"></div>
<p class="list-title">美食</p>
</li>
<li>
<div class="list-img"></div>
<p class="list-title">美食</p>
</li>
<li>
<div class="list-img"></div>
<p class="list-title">美食</p>
</li>
</ul>
<div class="pro-list-box">
<h2>猜你喜欢</h2>
<ul>
<li class="pro-list">
<img class="pro-list-img" src="http://p0.meituan.net/200.0/deal/df51d0ace6c4c4969fb60d4127922cbd51875.jpg@100_0_400_400a%7C267h_267w_2e_90Q" alt="">
<div class="pro-list-info">
<p>余年自助骨头锅</p>
<p>[芦家街/宣化街]单人骨头锅自助</p>
</div>
</li>
<li class="pro-list">
<img class="pro-list-img" src="http://p0.meituan.net/200.0/deal/df51d0ace6c4c4969fb60d4127922cbd51875.jpg@100_0_400_400a%7C267h_267w_2e_90Q" alt="">
<div class="pro-list-info">
<p>余年自助骨头锅</p>
<p>[芦家街/宣化街]单人骨头锅自助</p>
</div>
</li>
<li class="pro-list">
<img class="pro-list-img" src="http://p0.meituan.net/200.0/deal/df51d0ace6c4c4969fb60d4127922cbd51875.jpg@100_0_400_400a%7C267h_267w_2e_90Q" alt="">
<div class="pro-list-info">
<p>余年自助骨头锅</p>
<p>[芦家街/宣化街]单人骨头锅自助</p>
</div>
</li>
</ul>
</div>
</body>
</html>
旋转合并照片墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#container {
background: url(img/bg.jpg) 0 0 repeat;
position: relative;
height: 100%;
}
.box {
width: 125px;
height: 125px;
border: 5px solid #fff;
position: absolute;
left: -135px;
top: -135px;
transition: all 2s ease;
}
.box span {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: url(img/1.jpg) 0 0 no-repeat;
opacity: 0;
}
#next {
position: absolute;
width: 50px;
height: 100px;
background: #ff0000;
right: 0;
top: 50%;
transform: translateY(-50%);
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="next"></div>
</div>
<script>
var oContainer = document.getElementById('container');
var count = 0;
var now = 0;
// 加载小图
for (var i = 0; i < 24; i++) {
var oImg = new Image();
oImg.onload = function() {
count++;
if (count == 48) {
loadSuccess()
}
}
oImg.src = "img/thumbs/" + (i + 1) + ".jpg";
}
// 加载大图
for (var i = 0; i < 24; i++) {
var oImg = new Image();
oImg.onload = function() {
count++;
if (count == 48) {
loadSuccess();
}
}
oImg.src = "img/" + (i + 1) + ".jpg";
}
// 等待所有图片加载完成，再继续（保证能够获取图片属性）
function loadSuccess() {
//1. 生成24个div 插入到页面左上角
var idx = 0;
for (var i = 0; i < 4; i++) { //行 数
for (var j = 0; j < 6; j++) { //列数
var oDiv = document.createElement('div');
oDiv.style.background = "url(img/thumbs/" + (idx + 1) + ".jpg)";
oDiv.className = "box";
oDiv.row = i; //自定义行数
oDiv.col = j; //自定义列数
oDiv.index = idx;
idx++;
oDiv.innerHTML = "<span></span>"
oDiv.onclick = fn;
oContainer.appendChild(oDiv);
}
}
//2.改变.box的位置
var aBox = document.getElementsByClassName('box');
// 获取一个box元素的宽、高
var oBoxWidth = aBox[0].offsetWidth;
var oBoxHeight = aBox[0].offsetHeight;
// box之间水平间距
var disX = (container.offsetWidth - 6 * oBoxWidth) / 7;
// box之间垂直间距
var disY = (container.offsetHeight - 4 * oBoxHeight) / 5;
for (var i = 0; i < aBox.length; i++) {
//延迟时间第一个延迟时间最长 最后一个延迟时间最短
aBox[i].style.transitionDelay = (aBox.length - i) * 100 + "ms";
aBox[i].style.transform = "rotate(" + (Math.random() * 40 - 20) + "deg)";
aBox[i].style.left = (aBox[i].col + 1) * disX + aBox[i].col * oBoxWidth + "px";
// 行 1 2 3 n(从0开始)
// 1*disY 2*disY + 1*img 3*disY + 2*img (n+1)*disY +(n)img
var n = aBox[i].row; //获取行数
aBox[i].style.top = (n + 1) * disY + n * oBoxHeight + "px";
}
// 显示大图时 box左边间距
var bigDisX = (oContainer.offsetWidth - 6 * 127) / 2;
var bigDisY = (oContainer.offsetHeight - 4 * 127) / 2;
var flag = true; //true代表当前是散开 false代表当前是合并的状态
var oNext = document.getElementById('next');
function fn() {
if (flag) { //合并
for (var i = 0; i < aBox.length; i++) {
// 延迟时间设置为0
aBox[i].style.transitionDelay = "0ms";
// n*aBox.width + bigDisX;
aBox[i].style.left = aBox[i].col * 127 + bigDisX + "px";
aBox[i].style.top = aBox[i].row * 127 + bigDisY + "px";
aBox[i].style.transform = "rotate(0deg)";
aBox[i].style.borderWidth = "1px";
var oSpan = aBox[i].getElementsByTagName('span')[0];
oSpan.style.opacity = 1;
// this.index+1的那张图 top = -row * oBox.height
var x = -aBox[i].col * 125;
var y = -aBox[i].row * 125;
// 0px 0px no-repeat
oSpan.style.background = "url(img/" + (this.index + 1) + ".jpg) " + x + "px " + y + "px no-repeat";
}
oNext.style.display = "block";
// 将now的值 设置成点击div的索引
now = this.index;
} else { // 散开
for (var i = 0; i < aBox.length; i++) {
aBox[i].style.left = (aBox[i].col + 1) * disX + aBox[i].col * oBoxWidth + "px";
var row = aBox[i].row;
aBox[i].style.top = (row + 1) * disY + row * oBoxHeight + "px";
aBox[i].style.transform = "rotate(" + (Math.random() * 40 - 20) + "deg)";
var oSpan = aBox[i].getElementsByTagName('span')[0]
oSpan.style.opacity = 0;
}
oNext.style.display = "none";
}
flag = !flag;
}
var aSpan = oContainer.getElementsByTagName('span');
oNext.onclick = function() {
now++;
if (now == 24) {
now = 0;
}
// 讲span的背景图片切换成 now+1.jpg
for (var i = 0; i < aSpan.length; i++) {
aSpan[i].style.transitionDelay = Math.random() * 500 + "ms";
aSpan[i].style.backgroundImage = "url(img/" + (now + 1) + ".jpg)";
}
}
}
</script>
</body>
</html>
Jquery
onload
// 所有html资源加载完 会覆盖
window.onload = function(){
var oDiv = document.getElementById('div1');
console.log(oDiv.innerHTML);
}
//文档就绪 页面结构加载完 不会等待所有的资源 不会覆盖
$(document).ready(function(){
var oDiv = document.getElementById('div1');
console.log(oDiv.innerHTML);
});
Jquery对象
// 原生对象转成jq对象 $(dom)
console.log($(oDiv))
// jq对象转成原生对象 jq.get(0) || jq[0]
console.log($('#div1').get(0));
console.log($('#div')[0]);
Jquery
反选框(Jquery)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<button id="CheckedAll">全 选</button>
<button id="CheckedNo">全不选</button>
<button id="CheckedRev">反 选</button>
<script src="jquery-1.12.4.js"></script>
<script>
$('#CheckedAll').on('click', function() {
$(':checkbox').prop('checked', true);
})
$('#CheckedNo').on('click', function() {
$(':checkbox').prop('checked', false);
})
$('#CheckedRev').on('click', function() {
$(':checkbox').each(function(index, elem) {
elem.checked = !elem.checked;
})
})
</script>
</body>
</html>
选项卡(Jquery)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-1.12.4.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
#space {
margin: 100px;
}
#list {
overflow: hidden;
}
#list li {
float: left;
border: 1px solid #898989;
color: #666666;
font-size: 14px;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
margin-right: 10px;
border-bottom: none;
background: #f1f1f1;
}
#list li.active {
background: purple;
color: black;
}
#space1 {
border: 1px solid #868686;
height: 100px;
width: 300px;
}
#space1 div {
display: none;
}
#space1 .selected {
display: block;
}
</style>
</head>
<body>
<div id="space">
<ul id="list">
<li>时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
<div id="space1">
<div class="div1 selected" id="first">
时事1
</div>
<div class="div1" id="second">
体育1
</div>
<div class="div1" id="third">
娱乐1
</div>
</div>
</div>
<!-- <script>
$('#list').children().on('click', function() {
$('li').removeClass('active');
$('.div1').removeClass('selected');
var index = $(this).index();
$('#list').children().eq(index).addClass('active');
$('.div1').eq(index).addClass('selected');
})
</script> -->
<script>
$('li').on('click', function() {
$(this).addClass('active').siblings().removeClass('active');
var i = $(this).index();
$('.div1').eq(i).addClass('selected').siblings().removeClass('selected');
})
</script>
</body>
</html>
垂直导航菜单(Jquery)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-1.12.4.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#first span {
display: block;
width: 100px;
background: black;
font-size: 16px;
color: white;
border: 1px solid black;
height: 35px;
}
#second span {
display: block;
height: 35px;
width: 100px;
background: black;
font-size: 16px;
color: white;
border: 1px solid black;
}
#list {
width: 100px;
border: 1px solid black;
}
#list li {
height: 20px;
width: 100px;
background: white;
color: black;
}
div ul {
display: none;
}
div .show {
display: block;
}
</style>
</head>
<body>
<div>
<div id="first">
<span class="span1">管理区</span>
<ul class="list">
<li>2111</li>
<li>2111</li>
<li>2111</li>
</ul>
</div>
<div id="second">
<span class="span1">交流区</span>
<ul class="list">
<li>2111</li>
<li>2111</li>
<li>2111</li>
</ul>
</div>
</div>
<script>
$('.span1').on('click', function() {
$(this).next().toggleClass('show');
})
</script>
</body>
</html>
事件委托
// 支持事件委托
$('ul').on('click','li',function(){
// this指 li
console.log($(this).html());
})
// 点击按钮随机生成li
$('button').on('click',function(){
$('<li>'+Math.random()+'</li>').appendTo('ul');
})
//mouseenter不支持事件冒泡
// 事件源
console.log(e.target);
// 事件类型 "mouseenter"
console.log(e.type);
// 阻止默认行为
e.preventDefault();
// 阻止事件冒泡
e.stopPropagation();
// 鼠标相对于文档的左边缘的位置
console.log(e.pageX);
console.log(e.pageY);
// 获取键盘码
console.log(e.which);
动画
//.stop 一个布尔值，指示是否取消以列队动画。默认 false.
//.stop 一个布尔值指示是否当前动画立即完成 默认 false.
$('#stop').on('click',function(){
$('#div1').stop(false,true);
})
轮播图(Jquery)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#container {
width: 750px;
margin: 100px auto;
position: relative;
}
#img-box a {
display: none;
}
#img-box .selected {
display: block;
}
#btn-box {
position: absolute;
right: 10px;
bottom: 10px;
}
#btn-box li,
#arrow-box li {
float: left;
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
margin-right: 5px;
text-align: center;
line-height: 20px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
}
#btn-box .active {
background: #ff0036;
}
#arrow-box {
position: absolute;
left: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="img-box">
<a href="#" class="selected"><img src="img/1.jpg" alt=""></a>
<a href="#"><img src="img/2.jpg" alt=""></a>
<a href="#"><img src="img/3.jpg" alt=""></a>
<a href="#"><img src="img/4.jpg" alt=""></a>
<a href="#"><img src="img/5.jpg" alt=""></a>
</div>
<ul id="btn-box">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="arrow-box">
<li id="prev"><</li>
<li id="next">></li>
</ul>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
var iNow = 0;
$('#btn-box li').on('click',function(){
change($(this).index());
iNow = $(this).index();
})
$('#next').on('click',function(){
iNow++;
if(iNow == $('#btn-box li').size() ){
iNow = 0;
}
change(iNow);
})
// 接收index 按钮中索引是index的 active 其他灰色
function change(index){
$('#btn-box li').eq(index).addClass('active').siblings().removeClass('active');
$('#img-box a').eq(index).addClass('selected').siblings().removeClass('selected');
}
var timer = setInterval(function(){
// 执行next按钮的点击事件
$('#next').trigger('click');
},1000);
$('#container').hover(function(){//鼠标划入处理函数
clearInterval(timer);
},function(){ ////鼠标划出处理函数
timer = setInterval(function(){
$('#next').trigger('click');
},1000);
});
</script>
</body>
</html>
