- 博客(10)
- 收藏
- 关注
RSS订阅原创 放大镜（淘宝京东放大镜）原生js
要做放大镜的效果首先我们准备一张大的图片和一张小的图片，注意：要设置黄色框框的边界，即不能出上下左右的边大图跟着走的值的设定，有人用：黄色框走的值/大图走的值=黄色框的最大距离/大图走的最大距离来求，也可以。这里我为了方便就直接用 （大图的宽/小图的宽）*黄色框走的距离来计算大图走的距离<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>哈
2021-01-15 15:53:51
160
原创 diy滚动条（原生js）
写这个主要是练习一下对“位置”的应用就注意：滑轮移动的距离/文字移动的距离=滑轮移动的最大距离/文字移动的最大距离所以：文字移动的距离=滑轮移动的距离*文字移动的最大距离/滑轮移动的最大距离<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
2021-01-15 15:30:04
208
原创 鼠标挂件（gif图跟随鼠标移动）
让下面这张翅膀图片跟随鼠标移动，怎么做呢？其实就是利用到 事件参数对象 e 或者说window.event(IE8不支持e)，来获取鼠标的位置，然后把位置赋值给图片的位置就好了。很简单！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
2021-01-12 10:20:21
1407
原创 旋转木马轮播图（原生js）
旋转木马轮播图五张图片分别对应不同的left，top，width，opacity，zindex所以我们要建一个数组，来存储这5张图片对应的位置等属性然后通过自定义动画函数animate，详情请点开链接添加链接描述执行对li标签里的每一张图片的动画，分别到刚才储存的数组里。每当点击切换图片的按钮，利用arr.shift()这个函数意思是除去数组里第一个元素，并且返回这个元素的值再把这个元素添加到最后一个元素后面就好了即：arr.push(arr.shift())左边按钮相反利用arr.p
2021-01-09 21:18:28
641
原创 缓动动画封装 原生js
有的人获取元素left的值可能会用到 element.offsetLeft来获取如果盒子的position:absolute的话，这样的方式是能取到值的但是如果不是上述情况的话，用offsetLeft获取到的值是0这个时候我用要用到浏览器获取样式的函数即：window.getComputedStyle(element,null)来获取样式如果想获取left的值，即window.getComputedStyle(element,null).left但是这个函数IE8不支持，所以我们要写一个浏览器
2021-01-06 19:30:20
163
原创 轮播图完整（原生js）
用原生js写出无缝轮播图实现：1.鼠标进入下表，图片滑动到对应位置2.按左右按钮，图片滑动到上一张或下一张图片3.图片无缝切换，即鼠标进入到图片4的时候，再点击下一张，滑动到图片1。核心在于，虽然看上去是4张图片，其实在js里面在第四张图片的后面加了第一张图片。即1234=>123411.获取ul对象，方便移动2.在里面新增一张图片，用cloneNode（true），克隆第一张图片并添加在最后一张图后面。3.根据图片个数循环创建下标，要减1：用document.creatEeleme
2021-01-02 16:54:53
1903
原创 原生JS写轮播图（理解原理）
轮播图一般用框架是很少代码就可以完成的。那么用原生js是怎么写的呢？首先轮播的图片是在ul里的li标签里。1.获取ul元素，因为切换图片的时候，让整个ul向左移动一个图片的长度var bigBobj = my$("box"); var fdivobj = bigBobj.children[0]; var ulobj = fdivobj.children[0]; var spanobjs = fdivobj.children[1].children;2.然后为每个切换图片的
2020-12-31 19:50:03
800
原创 移动div盒子 原生js
开始点击第一个按钮移动到400px点击第二个按钮移动到800px点击第一个按钮移动到400px这里需要用到定时器需要注意的是：1.元素移动div盒子要脱离文档流，即（position：absolute）2.通过element.style.left不能获取元素的left，只能设置，要用offsetLeft()来获取3.最好不用var timeid = setInterval(fn,time)的方式，因为这样每点击一次按钮就会定义一个新的timeid，你会发现移动的盒子逐渐加快速度。好的方式是
2020-12-26 18:52:26
900
2
原创 简单的点菜（复选框）---原生js
实现效果：点击头部，全选或全部取消下面4个全点击 ，头部也点击<div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="allcheck""/> </th> <th>菜.
2020-12-10 16:49:00
378
原创 简单的TAB切换
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2020-12-09 14:04:58
172
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人