html时钟轮播图,html之小特效（吸顶菜单、选项卡、轮播图、模拟时钟。。。）...

最新推荐文章于 2022-11-24 20:21:30 发布

weixin_35977784

最新推荐文章于 2022-11-24 20:21:30 发布

阅读量298

点赞数

文章标签： html时钟轮播图

文章目录1、吸顶菜单2、选项卡3、轮播图3.1 显示与隐藏式-轮播图3.2位置切换-轮播图4、模拟时钟4.1、数字时钟4.2、模拟时钟5、全选和反选

1、吸顶菜单

代码：css样式不重要，主要的是js获取滚动条与窗口的之间的高度，然后根据高度控制导航条的定位样式。

顶部悬浮条

margin: 0;

padding: 0;

}

#container{

width: 1200px;

background-color: black;

padding-top: 200px;

margin: auto;

position:relative;

}

ul{

list-style:none;

}

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;

}

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";

}

2、选项卡

一个非常简单的选项卡效果，主要用到了鼠标的事件(onmousemove：鼠标在元素的移动)，然后改变div的显示或隐藏(display:none;隐藏 display:block;显示).

选项卡操作

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;

}

111

222

333

11111111
11111111
11111111

22222222
22222222
22222222222

333333333
333333333
333333333333

//获取选项标题

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";

}

3、轮播图

3.1 显示与隐藏式-轮播图

通过jquery的动画效果，实现的轮播图，这里主要用了jquery的fadeIn(“fast”/“slow”/时间)显示和fadeOut(“fast”/“slow”/时间)隐藏两个方法。

设置一个计时方法，实现图片之间的切换，从而到达轮播图的效果。

还要引进jquery的js文件

图片轮播--透明度

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;

}

$(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)

});

3.2位置切换-轮播图

主要通过jquery的自定义动画animate改变图片所在的位置，让超过显示图片的地方隐藏，图片不停的改变位置，从而实现轮换效果。

轮播图

*{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;

}

//位置轮播图

//定义变量，表示当前图片下标

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)

4、模拟时钟

4.1、数字时钟

通过var _time = new Date() 获取时间，然后通过 innerText = “文本”，改变标签的文本。通过

setInterval(function(){

},时间);

函数，不停改变文本，从而到达数字的改变。

数字时钟

#show{

width: 400px;

height: 80px;

line-height: 80px;

text-align: center;

border: 3px solid black;

border-radius: 10px;

font-size: 30px;

margin: auto;

}

year-moth-day 00:00:00

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();

4.2、模拟时钟

这个没什么难度，主要是获取时间，通过时间实时改变时、分、秒针的位置变换。

Title

.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;

}

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();

5、全选和反选

效果分析

全选效果

1. 全选复选框[所有单个选项的全部选中/取消]

全选复选框->选中->所有商品单个选项选中

全选复选框->不选->所有商品单个选项不选择

2. 单个选项

当所有商品单个选项全部选中->全选自动选中

当任意一个商品没有选中->全选不能选中

Title

* {

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;

}

全选
商品名称
商品单价

商品1
￥1800

商品2
￥38000

商品2
￥38000

商品2
￥38000

商品2
￥38000

商品2
￥38000

商品2
￥38000

$(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);

}

})

weixin_35977784

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html时钟轮播图,html之小特效（吸顶菜单、选项卡、轮播图、模拟时钟。。。）...

文章目录1、吸顶菜单2、选项卡3、轮播图3.1 显示与隐藏式-轮播图3.2位置切换-轮播图4、模拟时钟4.1、数字时钟4.2、模拟时钟5、全选和反选1、吸顶菜单代码：css样式不重要，主要的是js获取滚动条与窗口的之间的高度，然后根据高度控制导航条的定位样式。顶部悬浮条*{margin: 0;padding: 0;}#container{width: 1200px;background-color...
复制链接

扫一扫