彩虹更新中

导航

 

2020年3月25日

摘要: 如果勾选记住用户名, 下次用户打开浏览器,就在文本框里面自动显示上次登录的用户名 1.把数据存起来,用到本地存储 2.关闭页面,也可以显示用户名,所以用到localStorage 3.打开页面,先判断是否有这个用户名,如果有,就在表单里面显示用户名,并且勾选复选框 4.当复选框发生改变的时候chan 阅读全文
posted @ 2020-03-25 22:07 彩虹更新中 阅读(223) 评论(0) 推荐(0)
 
摘要: 滚动某个地方显示 事件:scroll页面滚动事件 如果被卷去的头部(window.pageYOffset )大于某个数值 点击,window.scroll(0,0) 返回顶部 var goback = document.querySelector('.goback'); var nav = docu 阅读全文
posted @ 2020-03-25 19:59 彩虹更新中 阅读(209) 评论(0) 推荐(0)
 
摘要: 制作过程中容易发生错误的地方: 1.在制作轮播是需要在展示的图片前后都多加一张图,比如你要放1,2,3号图,那么需要再加2张图3,1,2,3,1. 2.图片打开看的是1号图,需要直接给它设置一个margin-left盒子宽度负值。如果在js中直接给一个translate宽度,会出现问题; 3.注意需 阅读全文
posted @ 2020-03-25 18:56 彩虹更新中 阅读(256) 评论(0) 推荐(0)
 

2020年3月24日

摘要: 轮播图也称为焦点图,是网页中比较常见的网页特效。 功能需求: ​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 ​ 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 ​ 3.图片播放的同时,下面小圆圈模块跟随一起变化。 ​ 4.点击小圆圈,可以播放相应图片。 ​ 5.鼠标 阅读全文
posted @ 2020-03-24 23:06 彩虹更新中 阅读(300) 评论(0) 推荐(0)
 
摘要: function animate(obj, target, callback) { // 需要先清除定时器,防止连续点击速度变快 clearInterval(obj.timer) obj.timer = setInterval(function() { if (obj.offsetLeft == t 阅读全文
posted @ 2020-03-24 21:49 彩虹更新中 阅读(149) 评论(0) 推荐(0)
 
摘要: <button>点击动画开始</button> <div></div> 注意一定要给div加定位,不然就没法移动了 div { position: relative; top: 0; left: 0; width: 100px; height: 100px; background-color: pi 阅读全文
posted @ 2020-03-24 10:50 彩虹更新中 阅读(215) 评论(0) 推荐(0)
 
摘要: <div class="product_intro container clearfix"> <div class="product_img"> <div class="product_img_1"> <div class="mask"></div> <div class="show_big"> < 阅读全文
posted @ 2020-03-24 09:41 彩虹更新中 阅读(252) 评论(0) 推荐(0)
 

2020年3月23日

摘要: 仿淘宝侧边栏滚动 案例情况: 原先侧边栏是绝对定位 当页面滚动到一定位置,侧边栏改为固定定位 页面继续滚动,会让 返回顶部显示出来 案例分析: 需要用到页面滚动事件 scroll 因为是页面滚动,所以事件源是document 滚动到某个位置,就是判断页面被卷去的上部值。 页面被卷去的头部:可以通过w 阅读全文
posted @ 2020-03-23 16:05 彩虹更新中 阅读(252) 评论(0) 推荐(0)
 
摘要: 页面被卷去的头部,有兼容性问题,因此被卷去的头部通常有如下几种写法: 1.声明了 DTD,使用 document.documentElement.scrollTop 2.未声明 DTD,使用 document.body.scrollTop 3.新方法 window.pageYOffset和 wind 阅读全文
posted @ 2020-03-23 10:27 彩虹更新中 阅读(220) 评论(0) 推荐(0)
 

2020年3月21日

摘要: HTML: <label for="message">手机号</label> <input type="text" id="message"> <button>发送</button> JS: <script> var input = document.querySelector('input'); 阅读全文
posted @ 2020-03-21 23:23 彩虹更新中 阅读(183) 评论(0) 推荐(0)