javascript + PC端
王哆啦啦
我的头脑总是枯竭,但是我装作没那回事···
展开
-
PC端-横向轮播图
步骤: 第一步:先实现右侧按钮点击图片动起来; 每次点击图片走的距离; 起始位置已知,计算定时器每走一小步的距离; 第二步:判断点击按钮一次图片移动的距离,停止定时器; -** 第三步**:左边按钮逻辑和右侧按钮几乎一致; 因此封装函数move(flag),函数传参是Boolean则是左右按钮方向 第四步:无缝轮播:html结构修改,在当前结构分别加第一张图和最后一张图; 判...原创 2020-02-04 20:46:53 · 2971 阅读 · 0 评论 -
PC端-自定义滚动条
html代码: <div id="wrap"> <div id="content"></div> <div id="scrollBar"> <div id="scrollIn"></div> </div> </div> css代码...原创 2020-02-03 15:03:31 · 531 阅读 · 0 评论 -
系统滚动条
html和body这两个元素overflow的scroll属性,控制着系统的滚动条(document和body); 系统的滚动条有两个,一个是body身上的 ,一个是document身上的。我们平时看到的那个滚动条是document身上的。如果我们想要控制系统滚动条哪个显示哪个关闭分以下情况: 1、单独的给body或者html 设置overflow:scroll 滚动...原创 2020-02-02 15:24:07 · 186 阅读 · 0 评论 -
PC端-元素拖拽
元素的最终位置=元素的初始位置+鼠标的距离差 元素的最终位置 = 元素的初始位置 + 鼠标的距离差 元素的最终位置=元素的初始位置+鼠标的距离差 html代码: <div id="box"></div> css代码: <style> * { padding: 0; margin: 0; ...原创 2020-02-02 15:16:56 · 330 阅读 · 0 评论 -
项目css初始化
<style type="text/css"> *{ margin: 0; padding: 0; } ul,li{ list-style: none; } a{ text-decoration: none; } img{ display: block; } input{ o...原创 2020-02-02 15:15:52 · 134 阅读 · 0 评论 -
PC端-盒子来回移动
html代码: <div id="box"></div> css代码: <style> * { margin: 0; padding: 0; } body { position: relative; } ...原创 2020-02-02 15:14:49 · 244 阅读 · 0 评论 -
PC端-导航跟随
html代码: <div id="top_wrap"></div> css代码: <style> * { margin: 0; padding: 0; } body { height: 3000px; } ...原创 2020-02-02 15:13:00 · 227 阅读 · 0 评论 -
PC端-元素边界吸附&触碰交互
知识点1:全局捕获:box.setCapture && box.setCapture();(低级浏览器) 释放全局捕获:box.releaseCapture && box.releaseCapture();低级浏览器) 知识点2:禁止浏览器默认行为:return false;(高级浏览器) 知识点3:计算元素到视口上方和左边的距离:getBoundin...原创 2020-02-02 14:53:50 · 369 阅读 · 0 评论 -
PC端-阅读协议
html代码 <input type="button" value="阅读协议(5s)" disabled="disabled"> javascript代码 <script> var num = 5; var inputNode = document.querySelector('input'); var timer...原创 2020-01-31 18:10:14 · 271 阅读 · 0 评论 -
PC端-获取现在时间
html代码: <span></span> javascript代码: <script> function getDateAndTimeNow() { var date = new Date(); var year = date.getFullYear(); var...原创 2020-01-31 17:09:58 · 301 阅读 · 0 评论