搜索到
4
篇与
动画
的结果
-
HTML5+CSS3+JavaScript实现放大镜功能 HTML5+CSS3+JavaScript实现放大镜功能预览{anote icon="" href="https://000081.xyz/html/227.html" type="success" content="点我预览"/}源代码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>放大</title> </head> <style> * { box-sizing: border-box; border: 0px; padding: 0px; margin: 0px; } .box { background-image: url(https://img14.360buyimg.com/n0/jfs/t1/94207/33/20990/176816/6201dec4E37ffda91/5cff1795baf37b01.jpg); background-size: 100% 100%; float: left; border: 5px solid black; } .fdj { visibility: hidden; position: relative; background-color: aqua; opacity: 0.1; } .out_box { visibility: hidden; margin-left: 50px; overflow: hidden; float: left; border: 5px solid black; } .big_box { position: relative; background-image: url(https://img14.360buyimg.com/n0/jfs/t1/94207/33/20990/176816/6201dec4E37ffda91/5cff1795baf37b01.jpg); background-size: 100% 100%; } </style> <body> <div class="box" id="box"> <div class="fdj" id="fdj"></div> </div> <div class="out_box" id="out_box"> <div class="big_box" id="big_box"></div> </div> </body> <script> var box = document.getElementById("box"); var fdj = document.getElementById("fdj"); var out_box = document.getElementById("out_box"); var big_box = document.getElementById("big_box"); // 普通图片宽高大小 box var small_width = 400; var small_height = 400; // 放大镜宽高 var fdj_width = 200; var fdj_height = 200; // 放大div的宽高大小 out_box; var out_width = 400; var out_height = 400; // 放大后图片宽高 big_box var big_width = 800; var big_height = 800; // 放大倍率 var width_beilv = -1 * (big_width / small_width); var height_beilv = -1 * (big_height / small_height); // 重新调整布局 //box box.style.width = small_width + "px"; box.style.height = small_height + "px"; //fdj fdj.style.width = fdj_width + "px"; fdj.style.height = fdj_height + "px"; //out_box out_box.style.width = out_width + "px"; out_box.style.height = out_height + "px"; //big_box big_box.style.width = big_width + "px"; big_box.style.height = big_height + "px"; box.onmouseover = function (e) { fdj.style.visibility = "visible"; out_box.style.visibility = "visible"; }; box.onmousemove = function (e) { //用page而不用clien的原因是如果页面过长导致轮滑滚动，clien错位 var x = e.pageX - fdj_width / 2; var y = e.pageY - fdj_height / 2; x = x < 0 ? 0 : x > small_width - fdj_width ? small_width - fdj_width : x; y = y < 0 ? 0 : y > small_height - fdj_height ? small_height - fdj_height : y; fdj.style.left = x + "px"; fdj.style.top = y + "px"; big_box.style.left = width_beilv * x + "px"; big_box.style.top = height_beilv * y + "px"; }; box.onmouseout = function (e) { fdj.style.visibility = "hidden"; out_box.style.visibility = "hidden"; }; </script> </html> -
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>
-
HTML5+CSS3+JavaScript实现大图滚动轮播功能 HTML5+CSS3+JavaScript实现大图滚动轮播功能预览{anote icon="" href="https://000081.xyz/html/219.html" type="success" content="点我预览"/}源代码<!DOCTYPE html> <html> <head> <meta charset="utf8" /> <title>大图滚动</title> </head> <style> * { border: 0; padding: 0; margin: 0; box-sizing: border-box; } .box { overflow: hidden; width: 1300px; height: 400px; } .lunbo { float: left; width: 2600px; height: 400px; } .lunbo > img { float: left; width: 260px; height: 400px; } </style> <body> <div class="box"> <div class="lunbo" id="lunbo"> <img src="http://pic0.iqiyipic.com/image/20220412/53/6e/v_166855639_m_601_m3_260_360.jpg?caplist=jpg,webp,avif,%20//pic0.iqiyipic.com/image/20220412/53/6e/v_166855639_m_601_m3_260_360.jpg?caplist=jpg,webp,avif%202x" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200au8kyla1649663936904/350" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200upu5qi11648787330562/350" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200awcmu741648630288660/350" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/dt9oaxh094144711649149461225/350" /> <img src="http://pic0.iqiyipic.com/image/20220412/53/6e/v_166855639_m_601_m3_260_360.jpg?caplist=jpg,webp,avif,%20//pic0.iqiyipic.com/image/20220412/53/6e/v_166855639_m_601_m3_260_360.jpg?caplist=jpg,webp,avif%202x" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200au8kyla1649663936904/350" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200upu5qi11648787330562/350" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/mzc00200awcmu741648630288660/350" /> <img src="http://puui.qpic.cn/vcover_vt_pic/0/dt9oaxh094144711649149461225/350" /> </div> </div> <input style="width:100px;height:50px;margin-top: 50px;margin-left: 625px" type="button" onclick="fangxiang()" value="点我改变方向"> </body> <script> // 定时器锁 var time_lock = true; // 鼠标锁 var mouse_lock = true; // 轮播对象 var lunbo = document.getElementById("lunbo"); // 速度，正数向右滚动，负数向左滚动 var speed = -1; function fangxiang(){ speed *= -1; } // 初始赋值 if (speed < 0) { lunbo.style.marginLeft = "0px"; } else { lunbo.style.marginLeft = "-1300px"; } //定时器 var timer = setInterval(() => { if (time_lock && mouse_lock) { // 取当前位移量 var l = parseInt(lunbo.style.marginLeft); // 每到一张完整的图片就停一秒 if (l % 260 == 0) { time_lock = false; setTimeout(() => { time_lock = true; }, 1000); } // 使图片循环 if (l > 0 || l < -1300) { if (speed < 0) { lunbo.style.marginLeft = "0px"; } else { lunbo.style.marginLeft = "-1300px"; } return; } lunbo.style.marginLeft = l + speed + "px"; } }, 1); // 鼠标进入轮播图则停止滚动 lunbo.onmouseover = function () { mouse_lock = false; }; // 鼠标退出轮播图则继续滚动 lunbo.onmouseout = function () { mouse_lock = true; }; </script> </html>
-
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
