header栏的一个特效
思路
在滚动事件中 写逻辑 修改 通栏的透明度
-
需要设置滚动的范围 滚动的距离 跟轮播图的高度一致即可
获取变量 通栏 轮播图的高度
为window绑定事件 onscroll
在事件中,获取 滚动的距离 / 轮播图的高度 获取 比例值
当比例值 超过1时 就没有必要设置了
if (比例值>1) {
比例值=1;
}
function header(){
// 获取 通栏dom元素
var headerDom = document.querySelector('header');
// 获取 轮播图的高度 jq中 才是 height()
var bannerHeight = document.querySelector('.jd_banner').offsetHeight;
// 定义 最大的 透明度
var maxNum = 0.9;
// 定义 最大的比例值
var maxPercent = 1.0;
// 绑定事件
window.onscroll = function(){
// 获取 滚动的距离
// console.log(document.body.scrollTop);
// 计算比例
var percent = document.body.scrollTop/bannerHeight;
console.log(percent);
// 修改 计算出来的比例值
if (percent>maxPercent) {
percent = maxPercent;
}
// 这里设置即可
headerDom.style.backgroundColor = 'rgba(201,21,35,'+percent*maxNum+')';
}
}
倒计时特效
定义变量 记录总时间
-
使用interval 进行倒计时到interval设置的 函数中 进行倒计时操作
总时间--; 3600s
秒 转化为 时 分 秒
设置到dom元素中1.定义变量 总时间 获取 需要修改的span
2.开启定时器
3.定时器的内部逻辑
时间--;
格式化秒 为 时分秒
设置给对应的 dom元素
function countTime(){
// 总时间 秒
var totalNum = 5*60*60;
// var totalNum = 3;
// 获取 修改的span
var timeSpans = document.querySelectorAll('.downTime span');
// 封装 设置事件的 函数
var setTime = function(){
// 格式化为 时分秒 3690
var hour = Math.floor(totalNum / 3600);
var minute = Math.floor(totalNum % 3600 / 60);
var second = totalNum % 60;
// 设置给 对应的span
// 设置时 假设 有11小时
timeSpans[0].innerHTML = Math.floor(hour / 10); //获取 十位
timeSpans[1].innerHTML = hour % 10; //获取 个位
// 设置 分 56分钟
timeSpans[3].innerHTML = Math.floor(minute / 10);//获取 十位
timeSpans[4].innerHTML = minute % 10; //获取 个位
// 设置 秒 45分钟
timeSpans[6].innerHTML = Math.floor(second / 10);//获取 十位
timeSpans[7].innerHTML = second % 10; //获取 个位
}
// 设置 默认显示的时间
setTime();
// 开启倒计时
var timeID = setInterval(function(){
// 如果 时间变为0 那么 关闭定时器 同时提示用户
if (totalNum<=0) {
// 关闭定时器
clearInterval(timeID);
// 提示一下
alert('你来晚啦 ,哈哈哈哈哈 没有优惠了');
// 统一的弹框 建议 自定义dom元素 display:block
// 跳出执行
return true;
}
// 递减时间 秒
totalNum--;
// 调用 抽取的 设置事件函数
setTime();
},1000);
}
晚上要好好学习，天天向上
今天学习了轮播图，倒计时，通栏的特效
function banner(){
//思路：
//会用到一个计时器，每回走一张下面的索引也要跟着走
//定义 变量记录 是哪一张轮播图
//定时器 interval 间隔调用
// 索引++;
// 修改 轮播图的位置
// 口口口口口口口口口口口
//先定义一下第一张的索引值，因为总共十张图片，然后最左面有一张，所以当前这张的索引值为一
var index=1;
//获取屏幕的宽度
var width=document.body.offsetWidth;
//获取到ul这个对象
var ulObj=document.querySelector('.banner_imgs');
//获取到那些li标签
//var lis=document.querySelectorAll('.banner_imgs li');
//下面的索引的部分，同步一下
//获取下面索引部分的ul
var ulIndex=document.querySelector('.banner_index');
var liIndex=document.querySelectorAll('.banner_index li');
//定时器
var setId=setInterval(function(){
//让一秒走一张图片
//让它的index的值改一下
index++;
//如果index大于9的时候
if(index>=9){
index=1;
}
ulObj.style.transform='translateX(-'+width*index+'px)';
for(var i=0;i<liIndex.length;i++){
//把所有的那个索引的背景颜色都去掉
var classlist=liIndex[i].classList;
classlist.remove('current');
}
liIndex[index-1].classList.add('current');
},2000);
}
插入图片
005xcCKCjw1f4yomjo6vkj30qo0zg7aq.jpg
