- 博客(13)
- 收藏
- 关注
原创 PHP laravel 8 学习踩坑之旅(伪静态规则)
PHP laravel 8 学习踩坑之旅(伪静态规则)利用laravel脚手架搭建完项目通过php-study集成环境开启服务器访问htt.test,一切都很美好修改路由,准备测试一下功能直接访问 htt.test/home,哦豁,痛苦开始不断的尝试发现,当把url改变成 htt.test/index.php/home 后可以访问菜鸡的我在经过长达半天的搜集博客与无数次的重装项目,检测环境…,终于在这篇博客https://www.copylia
2021-08-21 18:24:43
1494
1
原创 JS轮播图写法二(改进:加入缓动函数,节流阀)
改进点加入缓动函数,节流阀在之前的写法中使用的是过渡效果,会存在当从最后一张图切换至第一张时,会倒退回去,显示出所有的图片;当快速点击切换箭头时会出现动画播放过快,体验感不好,因此查阅资料做出以下改进。改进的代码: // 缓动动画函数 function animate (obj,target,callbackFn) { clearInterval(obj.timer); obj.timer = setInterval(function ()
2020-08-23 16:53:15
327
原创 JS轮播图,写法二
JS轮播图,写法二需求:自动轮播,鼠标移入轮播停止、移出继续,小圆点点击切图,左右箭头切图效果图:![轮播图思路:将所有需要轮播的图片横向排列,可视区大小设置为只能显示一张图片,给容器设置移出隐藏后,可视区之外的部分被隐藏,这样我们就只能看见一张图片。轮播实现是改变整个图片画幅的left值或者margin-left 值,当点击时移动整个画幅单个图片的宽度即可实现滚动到下一张。后面功能实现顺序依旧是写法一里的思路。 戳!写法一地址HTML部分:<div id="banner"&
2020-08-23 13:20:38
1018
原创 JS轮播图,写法一
JS轮播图,写法一思路 通过编写过渡动画实现轮播效果,图片的出现动画以及移出动画。显示区的图片移出,切换的图进入分别调用动画,程序关键点:哪张图应该进入,哪张图应该移出。 轮播分为三部分: 自动轮播,左右箭头翻图,底部小圆点点击翻图。 编写程序顺序: 1. 小圆点点击 为什么先做小圆点呢?做小圆点点击功能时,我们能够清晰的知道哪张图片应该切换过来,哪张图片应该移开。例如,显示区是第一张图时,点击第二个原点,那么当前的第一张图应该移开,第二图应该进入。 2.左右箭头切换 这部分功能,我
2020-08-23 12:29:31
317
原创 好玩儿的JS特效,仿写拖动模糊框
拖动模糊框需求: 在图片上拖动按钮,图片蒙层慢慢覆盖,当蒙层边缘碰到左右下 角文字时,文字隐藏。技术: 监听器,鼠标坐标获取效果图源码分享:HTML<h1>Image Comparison Slider</h1> <nav><!--底层图--> <img src="img/img-original.jpg" alt=""> <!--蒙版使用背景图--> <div id="img">
2020-08-23 12:03:53
379
原创 好玩儿的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
1913
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
291
原创 GIF图制作
制作工具非常好用的一款格式转换工具。(重点:免费!免费!免费!)下载安装即可使用,也不需要注册,巴拉巴拉~~,附上官网地址。格式工厂官网,戳!进入正题我是录制的短视频然后转换为GIF图,就介绍操作流程吧,其他类型的转法应该大同小异。第一步,打开格式工厂软件,点击>>GIF功能第二步,将我们需要转GIF的视频文件拖到功能区。并点击确定。第三步,点击确定,我们的GIF图就做好了。质量不算很高,也能用了。...
2020-08-10 19:28:31
226
原创 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
418
原创 元素类别、清除浮动、盒子模型
元素类别1.块元素 (换行)特点:可以设置宽高,无宽高时默认占一行,换行2.行内(内嵌)元素(不换行)特点:不可以设置宽高,宽高就是内容,不换行span 常用于段落特定文字样式Img input 是一个有块元素属性的内嵌元素代码书写时,标签换行,会导致相邻元素出现间隙(空格)浮动(float)网页布局第一准则:多个块级元素纵向排列-标准流,多个块级元素横向排列-浮动浮动元素特性:1.浮动元素会脱离标准流/文档流(脱标) (浮动的盒子不在保留原先的位置)2.浮动元素会一行内显示并且顶
2020-08-10 18:34:44
239
原创 网页布局思路
网页布局思路1.必须确定页面的版心(可视区)测量可知。2.分析页面中的行模块以及每个行模块的列模块。页面布局的第一准则。3.一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则。4.HTML结构。遵循先有结构,后有样式的原则。结构永远最重要。总结搬运来源:pink老师...
2020-08-10 18:28:41
562
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人