标签 css3 下的文章

2022-04-13

HTML5+CSS3+JavaScript实现拖曳并按照原轨迹返回 HTML5+CSS3+JavaScript实现拖曳并按照原轨迹返回预览{anote icon="" href="https://000081.xyz/html/224.html" type="success" content="点我预览"/}源代码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>拖曳并按照原轨迹返回</title> <style> .box { width: 100px; height: 100px; border: 1px solid; position: absolute; top: 200px; left: 200px; } </style> </head> <body> <div class="box" id="box"></div> </body> <script type="text/javascript"> // 拖曳对象 var _box = document.getElementById("box"); // 启用对象移动的位置记录 var _bl = false; // 恢复轨迹锁 var his = false; // 对象移动的x轴数组 var x_sz = []; // 对象移动的y轴数组 var y_sz = []; // 拖曳总时长 var timer = ""; // 记录最开始的位置 var start_x = _box.offsetLeft; var start_y = _box.offsetTop; // 对象被点击，实现拖曳 _box.onmousedown = function (e) { // 如果锁启用则点击失效 if (his) { return; } // 开始手动校准位置 _box.style.left = start_x + "px"; _box.style.top = start_y + "px"; // 开启x,y记录 _bl = true; // 记录当前时间戳 timer = new Date().getTime(); // 记录当前点距离对象的左边距距离 var _x = e.offsetX; // 记录当前点距离对象的上边距距离 var _y = e.offsetY; // 拖曳过程函数 onmove = false; document.onmousemove = function (e) { // 如果记录锁被启用 if (_bl) { // 当前位置x var cache_x = e.clientX - _x; // 当前位置y var cache_y = e.clientY - _y; // 数组后追加当前在浏览器当前位置x轴 x_sz.push(cache_x); // 数组后追加当前在浏览器当前位置y轴 y_sz.push(cache_y); //重新设定位置 _box.style.left = cache_x + "px"; _box.style.top = cache_y + "px"; } }; }; // 鼠标弹起，拖曳结束 _box.onmouseup = function () { // 如果锁启用则点击失效 if (his) { return; } // 记录关闭 _bl = false; // 取当前时间戳，并且计算毫秒 timer = new Date().getTime() - timer; // 取数组总个数 var sz_len = x_sz.length - 1; // 计算定时器间隔 var dsq_time = Math.round(timer / sz_len); // 防止定时器叠加，清除定时器 clearInterval(dsq); // 启动恢复锁 his = true; // 恢复轨迹函数 var dsq = setInterval(function () { // 数组遍历完毕 if (sz_len <= 0) { x_sz = []; y_sz = []; // 结束手动校准位置 _box.style.left = start_x + "px"; _box.style.top = start_y + "px"; // 关闭恢复锁 his = false; // 清除定时器 clearInterval(dsq); return; } _box.style.left = x_sz[sz_len] + "px"; _box.style.top = y_sz[sz_len] + "px"; sz_len--; }, dsq_time); }; </script> </html>

2022年04月13日
177 阅读
0 评论
0 点赞

2022-04-12

2022年04月12日
170 阅读
0 评论
0 点赞

2022-03-29

HTML5+CSS3+JavaScript实现触碰边界自动反向运动的小球 HTML5+CSS3+JavaScript实现触碰边界自动反向运动的小球 .wp { width: 600px; height: 300px; position: relative; border: 1px solid black; } .box { position: absolute; width: 50px; height: 50px; background-color: rgb(216, 21, 21); border-radius: 50%; left: 0px; top: 0px; transition: all 0.1s; } //横速度 var width_speed = 10; //纵速度 var height_speed = 10; //绑定小球和外边盒子对象 var out = document.getElementById("out"); var box = document.getElementById("box"); //外边盒子宽高 var out_width = out.clientWidth; var out_height = out.clientHeight; console.log(out_width); console.log(out_height); //小球当前位置 var cache_width = box.offsetLeft; var cache_height = box.offsetTop; //定时器动画 var timer = setInterval(function () { cache_width += width_speed; cache_height += height_speed; //如果触碰到边界，速度乘以-1，反向运动 if (cache_width >= out_width - box.offsetWidth || cache_width = out_height - box.offsetHeight || cache_height

2022年03月29日
194 阅读
0 评论
1 点赞

2022-03-22

HTML5+CSS3+JavaScript实现位移轮播图 HTML5+CSS3+JavaScript实现位移轮播图演示 * { border: 0; box-sizing: border-box; padding: 0; } .wp { width: 800px; height: 200px; overflow: hidden; } .box { width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 2em; float: left; } .box1 { background: skyblue; } .box2 { background: yellow; } .box3 { background: orangered; } .box4 { background: brown; } .btm { overflow: hidden; } .btm div { width: 50px; height: 50px; text-align: center; line-height: 50px; float: left; } .btm1 { background: skyblue; } .btm2 { background: yellow; } .btm3 { background: orangered; } .btm4 { background: brown; } .next_div { float: left; width: 50px; height: 50px; background-color: transparent; color: black; margin-left: 100px; text-align: center; line-height: 50px; font-size: 35px; } .last_div { float: left; width: 50px; height: 50px; background-color: transparent; color: black; text-align: center; line-height: 50px; font-size: 35px; } 甲乙丙丁甲乙丙丁《》 //四个div拼起来的盒子 var _all_box = document.getElementById("wp"); //四个大正方形 var _box = _all_box.getElementsByTagName("div"); //四个按钮 var _btm = document.getElementsByClassName("btm"); //当前位置索引 var index = 1; //线程锁(防止定时器卡时间，比如一次性跳两页) var lock = false; for (let i = 1; i < _btm.length; i++) { _btm[i].onclick = function () { //取当前位置 var start = _all_box.style.marginLeft; //如果没有设置过marginLeft，那就会返回空，判断为空则左边距是0px if (start == "") start = 0 + "px"; //转数字 var pos = parseInt(start); //终点位置 var zhong = -200 * (i - 1); //定时器做动画 var flash = setInterval(qiehuan, 5); //启用线程锁 lock = true; //定时器执行的函数 function qiehuan() { //如果位置相等，清定时器 if (pos == zhong) { window.clearInterval(flash); } else { //大减小加 if (pos > zhong) { pos -= 25; } if (pos < zhong) { pos += 25; } //改变数值 _all_box.style.marginLeft = pos + "px"; } } //设置当前索引 index = i; }; } //下一页，触发下一控件onclick事件 function next() { //如果等于最后一个div，则返回第一个-1 if (index == 4) { index = 0; } index++; //触发onclick函数 _btm[index].onclick(); } //上一页，触发上一控件onclick事件 function last() { //如果等于第一个div，则返回最后一个+1 if (index == 1) { index = 5; } index--; //触发onclick函数 _btm[index].onclick(); } //添加上一页点击事件 document.getElementById("last_div").onclick = function () { lock = true; last(); }; //添加下一页点击事件 document.getElementById("next_div").onclick = function () { lock = true; next(); }; //轮播定时器,3秒循环 setInterval(() => { //如果线程锁启用，则跳过下一页函数，置线程锁为关闭。否则执行下一页函数 if (!lock) { next(); } lock = false; }, 3000); 源代码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { border: 0; box-sizing: border-box; padding: 0; } .wp { width: 1600px; height: 400px; overflow: hidden; } .box { width: 400px; height: 400px; text-align: center; line-height: 400px; font-size: 4em; float: left; } .box1 { background: skyblue; } .box2 { background: yellow; } .box3 { background: orangered; } .box4 { background: brown; } .btm { overflow: hidden; } .btm div { width: 100px; height: 50px; text-align: center; line-height: 50px; float: left; } .btm1 { background: skyblue; } .btm2 { background: yellow; } .btm3 { background: orangered; } .btm4 { background: brown; } .next_div { position: absolute; width: 50px; height: 50px; background-color: transparent; color: black; top: 175px; margin-left: 350px; text-align: center; line-height: 50px; font-size: 35px; } .last_div { position: absolute; width: 50px; height: 50px; background-color: transparent; color: black; top: 175px; text-align: center; line-height: 50px; font-size: 35px; } </style> </head> <body> <div style="width: 400px; height: 400px; overflow: hidden"> <div class="wp" id="wp"> <div class="box box1">甲</div> <div class="box box2">乙</div> <div class="box box3">丙</div> <div class="box box4">丁</div> </div> </div> <div class="btm"> <div class="btm1 btm" id="btm1">甲</div> <div class="btm2 btm" id="btm2">乙</div> <div class="btm3 btm" id="btm3">丙</div> <div class="btm4 btm" id="btm4">丁</div> </div> <div class="last_div" id="last_div">《</div> <div class="next_div" id="next_div">》</div> </body> <script> //四个div拼起来的盒子 var _all_box = document.getElementById("wp"); //四个大正方形 var _box = _all_box.getElementsByTagName("div"); //四个按钮 var _btm = document.getElementsByClassName("btm"); //当前位置索引 var index = 1; //线程锁(防止定时器卡时间，比如一次性跳两页) var lock = false; for (let i = 1; i < _btm.length; i++) { _btm[i].onclick = function () { //取当前位置 var start = _all_box.style.marginLeft; //如果没有设置过marginLeft，那就会返回空，判断为空则左边距是0px if (start == "") start = 0 + "px"; //转数字 var pos = parseInt(start); //终点位置 var zhong = -400 * (i - 1); //定时器做动画 var flash = setInterval(qiehuan, 5); //启用线程锁 lock = true; //定时器执行的函数 function qiehuan() { //如果位置相等，清定时器 if (pos == zhong) { window.clearInterval(flash); } else { //大减小加 if (pos > zhong) { pos -= 25; } if (pos < zhong) { pos += 25; } //改变数值 _all_box.style.marginLeft = pos + "px"; } } //设置当前索引 index = i; }; } //下一页，触发下一控件onclick事件 function next() { //如果等于最后一个div，则返回第一个-1 if (index == 4) { index = 0; } index++; //触发onclick函数 _btm[index].onclick(); } //上一页，触发上一控件onclick事件 function last() { //如果等于第一个div，则返回最后一个+1 if (index == 1) { index = 5; } index--; //触发onclick函数 _btm[index].onclick(); } //添加上一页点击事件 document.getElementById("last_div").onclick = function () { lock = true; last(); }; //添加下一页点击事件 document.getElementById("next_div").onclick = function () { lock = true; next(); }; //轮播定时器,3秒循环 setInterval(() => { //如果线程锁启用，则跳过下一页函数，置线程锁为关闭。否则执行下一页函数 if (!lock) { next(); } lock = false; }, 3000); </script> </html>

2022年03月22日
153 阅读
0 评论
1 点赞

2022-03-17

JavaScript实现tab键切换选项卡 JavaScript实现tab键切换选项卡{anote icon="fa-arrow-circle-right" href="http://www.000081.xyz/index.php/174-1.html" type="secondary" content="预览"/}重要的方法方法作用onclick添加点击触发事件onfocus获取焦点触发事件tabIndex添加tab键索引onblur离开焦点触发事件blur失去焦点focus设置焦点源代码<!DOCTYPE html> <html lang="zh"> <meta charset="utf8" /> <style> /* 大正方形的类 */ .box { width: 200px; height: 200px; position: absolute; float: left; line-height: 200px; text-align: center; font-size: 100px; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } /* 大正方形的类选择器 */ .box:nth-child(1) { background-color: red; } .box:nth-child(2) { display: none; background-color: wheat; } .box:nth-child(3) { display: none; background-color: blue; } .box:nth-child(4) { display: none; background-color: yellow; } /* 小正方形的类 */ .but { width: 50px; height: 50px; float: left; line-height: 50px; text-align: center; font-size: 25px; margin-top: 125px; } .but:nth-child(1) { background-color: red; } .but:nth-child(2) { background-color: wheat; } .but:nth-child(3) { background-color: blue; } .but:nth-child(4) { background-color: yellow; } .but:hover { background-color: black; color: white; } /* 最外层的，括起四个小正方形 */ ._div1 { width: 200px; height: 50px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } </style> <head> <title>tab切换选项卡</title> </head> <body> <div id="_div" class="_div"></div> <div id="_div1" class="_div1"></div> </body> <script> //当前索引号 var now_index = 0; var create_div = []; //给定时器加上线程锁 var next_tab = true; //颜色 var color_list = ["red", "wheat", "blue", "yellow"]; //大正方形的div var _div = document.getElementById("_div"); //小正方形的div var _div1 = document.getElementById("_div1"); //批量生成大小正方形 for (var i = 0; i <= 3; i++) { create_div[i] = document.createElement("div"); create_div[i + 4] = document.createElement("div"); create_div[i].className = "box"; create_div[i + 4].className = "but"; create_div[i].innerHTML = i + 1; create_div[i + 4].innerHTML = i + 1; //正方形获得焦点或者点击事件都会触发切换函数 create_div[i + 4].onclick = qiehuan; create_div[i + 4].onfocus = qiehuan; create_div[i + 4].onblur = qiehuan; //为4个小正方形添加tab键索引 create_div[i + 4].tabIndex = i + 1; //将生成的函数加入div _div.appendChild(create_div[i]); _div1.appendChild(create_div[i + 4]); } //取生成后的大小正方形 var __div = _div.getElementsByTagName("div"); var __div1 = _div1.getElementsByTagName("div"); //默认红色小正方形为选中状态 __div1[0].style.backgroundColor = "purple"; __div1[0].style.color = "white"; __div1[0].focus(); //切换函数代码 function qiehuan() { //取索引 var index = this.innerHTML - 1; //判断是否为定时器触发的切换 if (isNaN(index)) { //当索引值为最大时候自动跳回开始 if (now_index == 3) { now_index = -1; } //索引值为下一个 index = ++now_index; //获取当前焦点 __div1[index].focus(); } else { next_tab = false; } //全局变量索引为当前索引值 now_index = index; for (var i = 0; i <= 3; i++) { if (index == i) { __div1[i].style.backgroundColor = "purple"; __div1[i].style.color = "white"; __div[i].style.display = "block"; continue; } __div[i].style.display = "none"; __div1[i].style.backgroundColor = color_list[i]; __div1[i].style.color = "black"; } } //定时器 setInterval(() => { //当线程锁激活的时候跳过 if (next_tab) { qiehuan(); } //线程锁关闭 next_tab = true; }, 3000); </script> </html>

2022年03月17日
211 阅读
0 评论
0 点赞