1、吸顶菜单
代码：css样式不重要，主要的是js获取滚动条与窗口的之间的高度，然后根据高度控制导航条的定位样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>顶部悬浮条</title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
width: 1200px;
background-color: black;
padding-top: 200px;
margin: auto;
position:relative;
}
ul{
list-style:none;
}
a{
color: white;
}
a:hover{
color:#efefef;
}
#nav{
width: 1200px;
height: 80px;
background-color: aqua;
position: relative;
}
#nav > ul{
list-style: none;
}
#nav ul li{
float: right;
height: 80px;
width: 160px;
}
#nav ul li a{
margin-top: 30px;
display: block;
color: black;
font-size: 20px;
text-align: center;
line-height: 20px;
text-decoration: none;
}
#nav ul li a:hover{
background-color:palegoldenrod;
color: #222;
font-weight:bolder;
}
</style>
</head>
<body>
<div id="container">
<!--快速生成代码-->
<!--div.nav>ul>li*6>a{导航菜单}-->
<div id="nav">
<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>
</ul>
</div>
<div>
<ul>
<li><a href="">友情链接0000000000000000000001</a></li>
<li><a href="">友情链接0000000000000000000002</a></li>
<li><a href="">友情链接0000000000000000000003</a></li>
<li><a href="">友情链接0000000000000000000004</a></li>
<li><a href="">友情链接0000000000000000000005</a></li>
<li><a href="">友情链接0000000000000000000006</a></li>
<li><a href="">友情链接0000000000000000000007</a></li>
<li><a href="">友情链接0000000000000000000008</a></li>
<li><a href="">友情链接0000000000000000000009</a></li>
<li><a href="">友情链接00000000000000000000010</a></li>
<li><a href="">友情链接00000000000000000000011</a></li>
<li><a href="">友情链接00000000000000000000012</a></li>
<li><a href="">友情链接00000000000000000000013</a></li>
<li><a href="">友情链接00000000000000000000014</a></li>
<li><a href="">友情链接00000000000000000000015</a></li>
<li><a href="">友情链接00000000000000000000016</a></li>
<li><a href="">友情链接00000000000000000000017</a></li>
<li><a href="">友情链接00000000000000000000018</a></li>
<li><a href="">友情链接00000000000000000000019</a></li>
<li><a href="">友情链接00000000000000000000020</a></li>
<li><a href="">友情链接00000000000000000000021</a></li>
<li><a href="">友情链接00000000000000000000022</a></li>
<li><a href="">友情链接00000000000000000000023</a></li>
<li><a href="">友情链接00000000000000000000024</a></li>
<li><a href="">友情链接00000000000000000000025</a></li>
<li><a href="">友情链接00000000000000000000026</a></li>
<li><a href="">友情链接00000000000000000000027</a></li>
<li><a href="">友情链接00000000000000000000028</a></li>
<li><a href="">友情链接00000000000000000000029</a></li>
<li><a href="">友情链接00000000000000000000030</a></li>
<li><a href="">友情链接00000000000000000000031</a></li>
<li><a href="">友情链接00000000000000000000032</a></li>
<li><a href="">友情链接00000000000000000000033</a></li>
<li><a href="">友情链接00000000000000000000034</a></li>
<li><a href="">友情链接00000000000000000000035</a></li>
<li><a href="">友情链接00000000000000000000036</a></li>
<li><a href="">友情链接00000000000000000000037</a></li>
<li><a href="">友情链接00000000000000000000038</a></li>
<li><a href="">友情链接00000000000000000000039</a></li>
<li><a href="">友情链接00000000000000000000040</a></li>
<li><a href="">友情链接00000000000000000000041</a></li>
<li><a href="">友情链接00000000000000000000042</a></li>
<li><a href="">友情链接00000000000000000000043</a></li>
<li><a href="">友情链接00000000000000000000044</a></li>
<li><a href="">友情链接00000000000000000000045</a></li>
<li><a href="">友情链接00000000000000000000046</a></li>
<li><a href="">友情链接00000000000000000000047</a></li>
<li><a href="">友情链接00000000000000000000048</a></li>
<li><a href="">友情链接00000000000000000000049</a></li>
<li><a href="">友情链接00000000000000000000050</a></li>
<li><a href="">友情链接00000000000000000000051</a></li>
<li><a href="">友情链接00000000000000000000052</a></li>
<li><a href="">友情链接00000000000000000000053</a></li>
<li><a href="">友情链接00000000000000000000054</a></li>
<li><a href="">友情链接00000000000000000000055</a></li>
<li><a href="">友情链接00000000000000000000056</a></li>
<li><a href="">友情链接00000000000000000000057</a></li>
<li><a href="">友情链接00000000000000000000058</a></li>
<li><a href="">友情链接00000000000000000000059</a></li>
<li><a href="">友情链接00000000000000000000060</a></li>
</ul>
</div>
</div>
<script>
var _nav = document.getElementById("nav");
//滚动条事件
window.onscroll = function () {
//滚动条滚动的高度
_height = document.documentElement.scrollTop;
console.log(_height);
if(_height >= 200){
//修改导航栏的布局方式
_nav.style.position = "fixed";
_nav.style.top = 0;
}else{
_nav.style.position = "relative";
}
}
</script>
</body>
</html>
2、选项卡
一个非常简单的选项卡效果，主要用到了鼠标的事件（onmousemove：鼠标在元素的移动），然后改变div的显示或隐藏（display:none;隐藏 display:block;显示）.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡操作</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
margin: auto;
width: 600px;
height: 600px;
background-color: aqua;
}
.tab-title{
width: 600px;
height: 60px;
}
.tt{
float: left;
width: 200px;
height: 60px;
}
.tt:nth-of-type(1){
background-color: #fed38a;
}
.tt:nth-of-type(2){
background-color: fuchsia;
}
.tt:nth-of-type(3){
background-color: rebeccapurple;
}
.tab-content{
width: 600px;
height: 540px;
position: relative;
}
.tab-content ul{
list-style: none;
}
.tab-content > div{
display: none;
width: 600px;
height: 540px;
position: absolute;
}
.tab-content > div:nth-of-type(1){
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="tab-title">
<div id="tt1" class="tt">111</div>
<div id="tt2" class="tt">222</div>
<div id="tt3" class="tt">333</div>
</div>
<div class="tab-content">
<div class="tc">
<ul>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
</ul>
</div>
<div class="tc">
<ul>
<li>22222222</li>
<li>22222222</li>
<li>22222222222</li>
</ul>
</div>
<div class="tc">
<ul>
<li>333333333</li>
<li>333333333</li>
<li>333333333333</li>
</ul>
</div>
</div>
</div>
<script>
//获取选项标题
var _tt = document.getElementsByClassName("tt");
//获取对应的内容
var _tc = document.getElementsByClassName("tc");
//添加鼠标滑过事件
for (var i = 0; i < _tt.length; i++) {
//给当前标签添加一个index属性，记录下标
_tt[i].index = i;
//当鼠标在当前div上面的时候
_tt[i].onmousemove = function () {
//问题：知道当前的tt是第几个？
console.log(this.index);
//
//隐藏所有的div
for (var j = 0; j < _tc.length; j++) {
_tc[j].style.display = "none";
}
//展示和当前tt的div
_tc[this.index].style.display = "block";
}
}
</script>
</body>
</html>
3、轮播图
3.1 显示与隐藏式-轮播图
通过jquery的动画效果，实现的轮播图，这里主要用了jquery的fadeIn(“fast”/“slow”/时间)显示和fadeOut(“fast”/“slow”/时间)隐藏两个方法。
设置一个计时方法，实现图片之间的切换，从而到达轮播图的效果。
还要引进jquery的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播--透明度</title>
<script src="../js/lib/jquery2.2.4/jquery-2.2.4.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
#banel{
width:1200px;
height:auto;
position:relative;
margin: auto;
padding:5px;
}
.box{
position:absolute;
width:1200px;
height:auto;
border:solid 1px #888;
border-radius:5px;
overflow:hidden;
display:none;
}
.box:nth-of-type(1) {
display: block;
}
.box > img{
/*left-center-right top-middle-bottom*/
vertical-align: middle;
width:1200px;
height:auto;
}
</style>
</head>
<body>
<div id="banel">
<div class="box"><img src="../images/1.jpg" alt=""></div>
<div class="box"><img src="../images/2.jpg" alt=""></div>
<div class="box"><img src="../images/3.jpg" alt=""></div>
</div>
<script>
$(function() {
// 开始开发透明度轮播操作
// 定义变量，表示当前图片下标
var _current = 0;
// 获取当前操作的图片
var $imgs = $(".box");
// 定义计时函数，完成定时切换
setInterval(function() {
// 当前图片隐藏
var _img = $imgs.get(_current);
$(_img).fadeOut(1000);
// 下一张图片显示
var _next = _current + 1;
if(_next >= $imgs.size()){
_next = 0;
}
var _nextimg = $imgs.get(_next);
$(_nextimg).fadeIn(1000);
_current ++;
if(_current >= $imgs.size()) {
_current = 0;
}
}, 2000)
});
</script>
</body>
</html>
3.2位置切换-轮播图
主要通过jquery的自定义动画animate改变图片所在的位置，让超过显示图片的地方隐藏，图片不停的改变位置，从而实现轮换效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script src="./js/lib/jquery2.2.4/jquery-2.2.4.min.js"></script>
<style>
*{margin: 0;padding: 0}
#container{
width: 800px;
height: 400px;
background-color: aqua;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.box{
position:absolute;
width: 800px;
height: auto;
border: 1px solid #888;
border-radius: 5px;
overflow: hidden;
left: 800px;
}
.box:nth-of-type(1) {
display: block;
left:0;
}
.box > img{
/*垂直对齐：放在父元素的中部*/
vertical-align: middle;
width: 800px;
height: auto;
}
</style>
</head>
<body>
<div id="container">
<div class="box"><img src="./images/img1.jpg" alt=""></div>
<div class="box"><img src="./images/img2.jpg" alt=""></div>
<div class="box"><img src="./images/img3.jpg" alt=""></div>
</div>
<script>
//位置轮播图
//定义变量，表示当前图片下标
var _current = 0;
//获取当前操作的图片
var $imgs = $(".box");
//定义计时函数，完成定时切换
setInterval(function () {
//当前图片隐藏
var _img = $imgs[_current];
//想使用自定义动画将图片的位置改为-800，然后使用样式将图片的位置改为800，
//这样就实现了图片向左移动然后消失的效果。
$(_img).animate({
left:-800
},function () {
$(this).css({
"left":"800px"
})
});
//下一张图片显示
var _next = _current + 1;
console.log($imgs.length);
if(_next >= $imgs.size()){
_next = 0;
}
var _nextimg = $imgs.get(_next);
$(_nextimg).animate({
left:0
});
_current++;
if(_current >= $imgs.size()){
_current = 0;
}
},2000)
</script>
</body>
</html>
4、模拟时钟
4.1、数字时钟
通过var _time = new Date() 获取时间，然后通过 innerText = “文本”，改变标签的文本。通过
setInterval(function(){
},时间);
函数，不停改变文本，从而到达数字的改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字时钟</title>
<style>
#show{
width: 400px;
height: 80px;
line-height: 80px;
text-align: center;
border: 3px solid black;
border-radius: 10px;
font-size: 30px;
margin: auto;
}
</style>
</head>
<body>
<div id="show">year-moth-day 00:00:00</div>
<script>
var _show = document.getElementById("show");
func = function () {
setInterval(function () {
//获取时间
var _time = new Date();
year = _time.getFullYear();
moth = _time.getMonth()+1;
day = _time.getDate();
hour = _time.getHours();
minute = _time.getMinutes();
second = _time.getSeconds();
if(0 <= parseInt(second)&& parseInt(second)< 10){
second = "0" + second;
}
//展示时间
_show.innerText = year + "/" + moth + "/" + day + " " + hour +":"+minute+":"+second;
},1000)
};
func();
</script>
</body>
</html>
4.2、模拟时钟
这个没什么难度，主要是获取时间，通过时间实时改变时、分、秒针的位置变换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pan{
width: 400px;
height: 400px;
border-radius: 50%;
margin: 150px auto;
z-index: 1;
/*background-image: url("pan.jpg");*/
border: 1px solid aqua;
background-size: 400px 400px;
/*background-position: -15px -15px;*/
}
#shi{
display: block;
position: absolute;
width: 20px;
height: 80px;
margin: 120px 190px 0 190px;
z-index: 5;
/*background-image: url("shi.jpg");*/
border: 3px solid #888;
background-size: 20px 80px;
}
#fen{
display: block;
position: absolute;
width: 16px;
height: 130px;
margin: 70px 192px 0 192px;
z-index: 5;
/*background-image: url("fen.jpg");*/
border: 3px solid #888;
background-size: 30px 130px;
}
#miao{
display: block;
position: absolute;
width: 10px;
height: 150px;
margin: 50px 195px 0 195px;
z-index: 5;
/*background-image: url("miao.jpg");*/
border: 3px solid #888;
background-size: 30px 150px;
}
</style>
</head>
<body>
<div class="pan">
<p id="shi"></p>
<p id="fen"></p>
<p id="miao"></p>
</div>
<script>
var _shi = document.getElementById("shi");
var _fen = document.getElementById("fen");
var _miao = document.getElementById("miao");
func = function () {
setInterval(function () {
//获取时间
var _time = new Date();
hour = _time.getHours();
minute = _time.getMinutes();
second = _time.getSeconds();
//展示时间
//是指针围着Z轴转动
_shi.style.transform = "rotateZ("+ (hour % 12 + minute /60 + second / 3600) * 30 +"deg)";
//转动时的原点
_shi.style.transformOrigin = "50% 100%";
_fen.style.transform = "rotateZ("+ (minute + second / 60) * 6 +"deg)";
_fen.style.transformOrigin = "50% 100%";
_miao.style.transform = "rotateZ("+ second * 6 +"deg)";
_miao.style.transformOrigin = "50% 100%";
},1000)
};
func();
</script>
</body>
</html>
5、全选和反选
效果分析
全选效果
1. 全选复选框[所有单个选项的全部选中/取消]
全选复选框->选中->所有商品单个选项选中
全选复选框->不选->所有商品单个选项不选择
2. 单个选项
当所有商品单个选项全部选中->全选自动选中
当任意一个商品没有选中->全选不能选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入js的位置之一 -->
<script src="./js/lib/jquery2.2.4/jquery-2.2.4.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#container {
width: 1200px;
/*height: 200px;*/
margin: auto;
background-color: #888;
}
#goods-title , .goods-item{ /*标准格式*/
list-style: none;
clear:both;
}
#goods-title li, .goods-item li{
float: left;
width:200px;
height:80px;
color:white;
font-size:30px;
text-align:center;
line-height: 80px;
}
#goods-title li input[type="checkbox"],
.goods-item li input[type="checkbox"]{
width:20px;
height: 20px;
}
</style>
</head>
<body>
<div id="container">
<ul id="goods-title">
<li><input type="checkbox" name="checkall" id="checkall">全选</li>
<li>商品名称</li>
<li>商品单价</li>
</ul>
<ul class="goods-item">
<li><input type="checkbox" class="g-item"></li>
<li>商品1</li>
<li>￥1800</li>
</ul>
<ul class="goods-item">
<li><input type="checkbox" class="g-item"></li>
<li>商品2</li>
<li>￥38000</li>
</ul>
<ul class="goods-item">
<li><input type="checkbox" class="g-item"></li>
<li>商品2</li>
<li>￥38000</li>
</ul>
<ul class="goods-item">
<li><input type="checkbox" class="g-item"></li>
<li>商品2</li>
<li>￥38000</li>
</ul>
<ul class="goods-item">
<li><input type="checkbox" class="g-item"></li>
<li>商品2</li>
<li>￥38000</li>
</ul>
<ul class="goods-item">
<li><input type="checkbox" class="g-item"></li>
<li>商品2</li>
<li>￥38000</li>
</ul>
<ul class="goods-item">
<li><input type="checkbox" class="g-item"></li>
<li>商品2</li>
<li>￥38000</li>
</ul>
<div style="clear:both;"></div>
</div>
<!-- 引入js的位置之一 -->
<script>
$(function() {
// 全选/反选效果
$("#checkall").on("click", function() {
// 判断属性是否选中
if($(this).prop("checked")){
// 选中的情况下，所有的复选框要求都要选中
$(".g-item").each(function() {
$(this).prop("checked", true);
})
} else {
$(".g-item").each(function() {
$(this).prop("checked", false);
})
}
});
// 单个商品效果
$(".g-item").on("click", function() {
// 声明一个变量，用来判断是否全选状态
var _flag = true;
for(var i = 0; i < $(".g-item").size(); i++) {
var _g = $(".g-item")[i];
console.log($(_g));
console.log($(_g).prop("checked"));
console.log(!($(_g).prop("checked")));
if(!($(_g).prop("checked"))) {
// 不是全选
_flag = false;
}
}
if(_flag) {
$("#checkall").prop("checked", true);
} else {
$("#checkall").prop("checked", false);
}
})
})
</script>
</body>
</html>
扫一扫
1379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
