前言 相信大家应该都知道，移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是 使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改. 所以我们要尝试去自己造一些轮子, 以适应各种复杂多变的需求; 另外一点, 自己写的代码如果有bug是很容易修复的, 对自身的提高也很大. 在没有阅读swiper源码的过程下,我尝试自己实现一个简易而不失实用的移动端轮播图, 经过几个...
html部分： <img src="images/8.jpg" alt=""><button class="btn" id="showMax">显示大图</button> <div id="modalBox" class="modalBox"><div class="modalBox-matter"><header class="modalBox-header"><span class="mtclose"></span></header> <div class="modalBox-body"><img src="images/8-1.jpg"></div></div> </div>js部分： var btn = document.getElementById(showMax); var mtclose = document.getElementsByClassName(...
直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物页面</title> <style> ul{list-style:none;padding:0;margin:0;} .goods li{display:inline-block;border:1px solid #ddd;padding:10px;margin:10px;} .goods li:hover{} .goods .price{color:#f00;font-weight:bold;} .goods .price::before{ content:"￥"; } </style> <script> window.onload = function(){ var goods = document.getE...
现在的项目中都在用VUE 以及react 等MVC， MVVM 框架。 丢弃了原始的JQ 。不可能为了个$.ajax();而把JQ引进来吧。 在vue1的开发中 提供了 vueResouce, vue2 出来后明确提出了不在更新vueResouce 而提供axios 的方法。 在react 的开发中提供fetch 封装的方法。等等。但在工作与后台的交互中基本都是form表单的形式。于是自己封装了个 POST,GET,DELETE 的请求方式。当然根据不同的公司，不同的方式。都可以自己扩展。目前这个只是针...
在用js做动态效果时，通常需要获取元素绝对定位中的left和top属性值。比如做一个碰撞广告，就要不停的获取元素的top和left属性值。 需要注意的事：取值的元素必须要设置position:absolute绝对定位属性，才能取的到left值。 第一种方法，比较简单，就是直接通过obj.style.left和obj.style.top，但是有局限性，这种获取的方法只能获取到行内样式的left和top的属性值，不能获取到style标签和link 外部引用的left和top属性值。 第二种方...
事件委托的原理依赖于事件冒泡，可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作。 使用事件委托的优点 1、操作子元素时不用一一遍历，可以根据事件触发的对象而进行相应操作 dom结构如下： <ul id = "oUl"><li class = "item"></li><li class = "item"></li><li class = "item"></li><li class = "item"></li> <li class = "item"></li> </ul>当li被点击时，打印该li的值。 在我们还没有学事件委托的时候...
本文实例为大家分享了js实现图片上传本地预览效果的具体代码，供大家参考，具体内容如下<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;}.ob{background:#ccc;padding:1...
本文实例为大家分享了JS实现自定义滚动条的具体代码，供大家参考，具体内容如下 实现思路：1.外层设置一个div,在外层的div里面设置一个特别高的div(高度为外层5个div的高度)，在高的div里面设置5个div，每个div的高度，都和父级的高度相同 2.在外层div的右侧边框以里自定义一个滚动条，（本人用div设置样式作为滚动条） 3.最外层的div添加onmousewheel事件，使用e.wheelDelta来获取每次滑动的距离，若为正数则向上滑动，将每次增加...
本文实例为大家分享了js显示隐藏密码输入框值的具体代码，供大家参考，具体内容如下 直接贴上代码 <!DOCTYPE html> <html> <head><title>password intput demo</title> </head> <style type="text/css"> body{margin:0px; background-color: white; font-family: PT Sans, Helvetica, Arial, sans-serif; text-align: center; color: #A6A6A6; } /*输入框样式，去掉背景阴影模仿原生应用的输入框*/ input{ width: 100%; height: ...
一、延迟脚本 defer HTML4.0中为<script> 标签添加了个defer属性。属性的用途是表民脚本在执行时不会影响页面的构造。 脚本会被延迟到页面加载完毕的时候，执行。也就是当浏览器解析到</html> 标签后才会执行代码。在HTML5规范中，defer属性中适用于外部脚本。 而家了defer 的脚本文件会比DOMContentLoaded事件触发前执行。 二、异步脚本 async HTML5为<script>添加了个async属性。这个属性与defer属性类似。都是只对外部脚本有用...
在jQuery中，一个jq对象能一直连续调用各种方法，因为jQuery把这些方法挂载他自定义的一个对象中，但是使用原生的js获取的DOM对象，只能使用一次addEventLisenter方法添加事件，如果要接着添加事件，还得再调用addEventLisenter。 var area = document.querySelector(.area); area.addEventListener(mouseenter, function(){console.log( mouse enter ); }); area.addEventListener(click, function(){console.log( click ); }); 可...
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不可变换 这就是要求,下面来看代码: <!DOCTYPE html> <html> <head><met...
Math对象方法 //返回最大值var max=Math.max(95,93,90,94,98);console.log(max);//返回最小值var min=Math.min(95,93,90,94,98);console.log(min);//向上取整console.log(Math.ceil(2.2));console.log(Math.ceil(-2.2));//向下取整console.log(Math.floor(2.2));//2console.log(Math.floor(-2.2));//-3//四折五入console.log(Math.round(2.4));//四舍五入--3console.log(Math.round(-2.5));//负数+0.5,向下取整console.log(Math.ro...
今天说的这个是原生js的二级联动，在空白页面里动态添加并作出相对应的效果。 //创建两个下拉列表 select标签 是下拉列表var sel = document.createElement("select");var sel1 = document.createElement("select");//添加到bodydocument.body.appendChild(sel);document.body.appendChild(sel1); // 创建一个数组var firstSelectArr = ["未选择","医院","学校","公司","星座"];var detailFirstArr = ["未选择","院长","主任","大...
index.html页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>require.js封装轮播图</title> <style type="text/css">*{margin: 0;padding: 0;list-style: none;}#banner{width: 830px;height: 440px;border: solid 1px;margin: 50px auto;position: relative;overflow: hidden;}#banner ul{position: absolute;left: 0;top: 0;}#banner ul li{width: 830px;height: 440px;float: left;}#banner p{position: abs...