![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
hthththtt
这个作者很懒,什么都没留下…
展开
-
如何优雅的将JavaEnum转化为Js识别的Json对象
如何优雅的将JavaEnum转化为Js识别的Json对象原创 2022-06-11 15:40:05 · 559 阅读 · 0 评论 -
JS轮播图写法二(改进:加入缓动函数,节流阀)
改进点加入缓动函数,节流阀在之前的写法中使用的是过渡效果,会存在当从最后一张图切换至第一张时,会倒退回去,显示出所有的图片;当快速点击切换箭头时会出现动画播放过快,体验感不好,因此查阅资料做出以下改进。改进的代码: // 缓动动画函数 function animate (obj,target,callbackFn) { clearInterval(obj.timer); obj.timer = setInterval(function ()原创 2020-08-23 16:53:15 · 297 阅读 · 0 评论 -
JS轮播图,写法二
JS轮播图,写法二需求:自动轮播,鼠标移入轮播停止、移出继续,小圆点点击切图,左右箭头切图效果图:![轮播图思路:将所有需要轮播的图片横向排列,可视区大小设置为只能显示一张图片,给容器设置移出隐藏后,可视区之外的部分被隐藏,这样我们就只能看见一张图片。轮播实现是改变整个图片画幅的left值或者margin-left 值,当点击时移动整个画幅单个图片的宽度即可实现滚动到下一张。后面功能实现顺序依旧是写法一里的思路。 戳!写法一地址HTML部分:<div id="banner"&原创 2020-08-23 13:20:38 · 989 阅读 · 0 评论 -
JS轮播图,写法一
JS轮播图,写法一思路 通过编写过渡动画实现轮播效果,图片的出现动画以及移出动画。显示区的图片移出,切换的图进入分别调用动画,程序关键点:哪张图应该进入,哪张图应该移出。 轮播分为三部分: 自动轮播,左右箭头翻图,底部小圆点点击翻图。 编写程序顺序: 1. 小圆点点击 为什么先做小圆点呢?做小圆点点击功能时,我们能够清晰的知道哪张图片应该切换过来,哪张图片应该移开。例如,显示区是第一张图时,点击第二个原点,那么当前的第一张图应该移开,第二图应该进入。 2.左右箭头切换 这部分功能,我原创 2020-08-23 12:29:31 · 287 阅读 · 0 评论 -
好玩儿的JS特效,仿写拖动模糊框
拖动模糊框需求: 在图片上拖动按钮,图片蒙层慢慢覆盖,当蒙层边缘碰到左右下 角文字时,文字隐藏。技术: 监听器,鼠标坐标获取效果图源码分享:HTML<h1>Image Comparison Slider</h1> <nav><!--底层图--> <img src="img/img-original.jpg" alt=""> <!--蒙版使用背景图--> <div id="img">原创 2020-08-23 12:03:53 · 351 阅读 · 0 评论 -
好玩儿的JS特效,页面鼠标点击出现图片
页面鼠标点击出现图片需求: 在页面可视区鼠标点击时,鼠标位置出现图片技术:监听器,鼠标坐标获取效果图源码分享:图片是动态添加进页面的,所以没有HTML部分。JSlet div = document.createElement("div"); div.id = "mouseImg"; for (let i =0 ; i <3 ;i++){ let img = document.createElement("img"); img.src = "images/原创 2020-08-16 14:05:04 · 1839 阅读 · 1 评论 -
DOM初学第一天,动态操作网页元素
动态操作节点需求分析: 要求动态获取数据,并添加到网页元素。技术点: 获取数据,动态添加节点,动态删除节点效果动图:源码分享:js <script> // 数据模拟 let arr = ["john Doe","jane Doe","Dan Doe","Danielle Doe","Mike Doe","Leah Doe","叔叔"]; //清除所有 let clea原创 2020-08-16 13:53:56 · 256 阅读 · 0 评论 -
CSS简单的交互动效
## 简单的图片动效制作 效果及源码如下:源码:1.HTML部分<!--第一个--> <div class="container container1 "> <h3> <span>NICE</span> LILY </h3> <p> LILY LIKES TO PLAY WITH CRAYON原创 2020-08-10 19:10:44 · 364 阅读 · 0 评论 -
元素类别、清除浮动、盒子模型
元素类别1.块元素 (换行)特点:可以设置宽高,无宽高时默认占一行,换行2.行内(内嵌)元素(不换行)特点:不可以设置宽高,宽高就是内容,不换行span 常用于段落特定文字样式Img input 是一个有块元素属性的内嵌元素代码书写时,标签换行,会导致相邻元素出现间隙(空格)浮动(float)网页布局第一准则:多个块级元素纵向排列-标准流,多个块级元素横向排列-浮动浮动元素特性:1.浮动元素会脱离标准流/文档流(脱标) (浮动的盒子不在保留原先的位置)2.浮动元素会一行内显示并且顶原创 2020-08-10 18:34:44 · 201 阅读 · 0 评论 -
网页布局思路
网页布局思路1.必须确定页面的版心(可视区)测量可知。2.分析页面中的行模块以及每个行模块的列模块。页面布局的第一准则。3.一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则。4.HTML结构。遵循先有结构,后有样式的原则。结构永远最重要。总结搬运来源:pink老师...原创 2020-08-10 18:28:41 · 526 阅读 · 0 评论