效果如下：代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>javascript</title><style>*{margin:0;padding:0;border:0;}a{text-decoration:none;color:#fff;font-size:40px;line-height:200px;display:none;text-align:center;}#container{width:300px;height:200px;margin:50px auto;position:relative;overflow:hidden;}#list{width:2100px;height:200px;position:absolute;top:0;}#list span{...
直接上代码，自行复制粘贴，本人是新手，欢迎指正。 <!DOCTYPE HTML> <html lang="en-US"> <head><meta charset="UTF-8"><title>轮播图</title><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /><style type="text/css">.container{width: 500px;height: 400px;overflow: hidden;margin: 50px auto;position: relative;}.list{width: 2500px;height: 400px;positio...
代码分两个部分：1、HTML部分，根据注释处理即可；2、play.js插件部分，引到HTML里面即可。 1、HTML部分： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>/*style标签及其内的内容，在实际项目中可以不要*/* {margin: 0;padding: 0;}</style> </head> <body> <!--body标签里的内容，没说可以增减或更改的，不要增减或更改--> <div id="box"><div><!--以下是可增减区域--><div><img src="im...
本文实例为大家分享了javascript图片轮播效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>图片轮播</title> <style> #box { width:506px; height:306px; margin: 20px auto; border:3px solid black; position:relative; background-color:orange; overflow: hidden; /*overflow: hidden;*/ } .pic { position: absolute; width:500px; height:300px; line-...
前言 单页/全屏滚动页面越来越常见了，它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件，本文实现的效果类似于fullpage的单屏滚动，使用原生JS实现，不依赖任何js库； css代码： html,body {height:100%;} body {margin:0px;} div {height:100%;}html代码: <div style="background:#FEE;"></div> <div style="background:#EFE;"></div> <div style="background:#EEF;"></div> <div style="back...
就目前三大前端主流数据驱动框架（vue,ng,react）而言，均具有创建自定义组件的api，但都是必须先做到事先写好挂载点，这个挂载点可以是原有静态元素标签也可以是自定义模板；对于多种组件通过同一数据流生成的，如果事先在页面上写好挂载点(mounted)，然后通过dom操作去动态添加，会遇到类似这样一条错误提示信息：Failed to execute appendChild on Node: parameter 1 is not of type Node.(…)。这又是为何呢，下一步该怎么办？...
知识要点 1.遮罩层的宽度和高度是js获取页面的宽高（页面内容） //获取遮罩层(内容)的高度和宽度var sHeight=document.documentElement.scrollHeight;var sWidth=document.documentElement.scrollWidth;2.登录框设置静止定位fixed 3.登录框居中显示公式：(可视区域宽高-登录框宽高)/2 //获取login的宽度和高度并设置偏移值var dHeight=oLogin.offsetHeight;var dWidth=oLogin.offsetWidth;oLogin.style.left=(sWidth-dWidth)/2+"px...
知识要点 1.实现无限循环的原理： 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){list.style.left=-3000+"px"; } if (newLeft<-3000){list.style.left=-600+"px"; }2.当前图片...
前言 众所周知，jquery在我们日常开发中的使用频率非常高，与js相比，我们省去了冗长的获取元素的代码，不用考虑一些麻烦的兼容问题，更加方便的动画实现，以及更加方便的方法调用让我们觉得jquery真是越用越舒服。但是jquery说到底还是对js的封装，我们不光要用的舒服还要深入理解其中的原理，这样才能更好的使用它。首先我们封装的函数为了能实现可传入无限多个参数，在使用我们即将封装的函数时，需要使用对象进行传参，形式如下...
知识要点 var fn=setInterval(function(){},1000) 每隔1秒执行一次函数 clearInterval(fn) 清除计时器 判断当图片放大缩小到固定大小时，清除计时器 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>de...
知识要点 1.实现原理： 通过递归改变div的高度值达到缓慢下拉的效果。 2.一共分为3个步骤我写了三个函数 第一个show()函数（下拉）：初始值高度h<300的话 h+5 反之return退出停止，调用setTimeout方法30毫秒执行一次+5 第二个hide()函数（收回）：只是高度的判断不同高度h-5 反之return退出停止，调用setTimeout方法30毫秒执行一次-5 第三个dd()函数（再次弹出）：这里要注意的是第二次弹出的div是一个新的div把它的高度设置为0，...
知识要点 1.实现原理很简单，通过点击a标签设置div的display属性隐藏或者显示， 主要是对dom操作的掌握。 2.需要用到的dom操作： parentNode 获取父级元素 nextSibling获取下一个紧跟的节点 previousSibling获取上一个紧跟的节点 3.注意事项： 要考虑到当点击展开全文的时候，其他已经展开的全文要收起来。 当用nextSibling获取下一个节点时候，不同浏览器的判断是不一样的 有的是获取元素，有的获取换行符或者空格，所以这里就要用...
知识要点 1.实现原理： 用结束时间-当前时间=时间差 当前时间每过1秒时间差自然也就少了1秒 所以要1秒更新一次当前时间就达到了倒计时的效果 2.需要注意的就是时间之间的转换和对得出数值的处理 3.用到的方法： obj.getTime() //换算成毫秒 Math.floor() //把小数点向下舍入结果取一个整数 50%24 // 这是对数值求余的方法，意思是 假如有50个小时，一天24个小时 这个得出的结果就是 余数是2 具体的数值的运算处理完整代码里有详细的...
运行原理 通过定时器30毫秒执行一次滚动条上升，每次上升的高度为当前高度的80%，这样就达到了上升缓冲的动画效果。 判断当滚动条高度超过一屏时，按钮显示，默认隐藏 知识要点 scrollTop//获取滚动条高度 需要写兼容 clientHeight//可视窗口高度 需要写兼容 setInterval//定时器 window.onscroll//滚动触发事件 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=u...
窗口可视区域宽度： document.documentElement.clientWidth || document.body.clientWidth; 窗口可视区域高度： document.documentElement.clientHeight || document.body.clientHeight; 窗口可视区域宽度+边线和滚动条： document.body.offsetWidth ; 窗口可视区域高度+边线和滚动条： document.body.offsetHeight ; 实际内容的宽度： document.body.scrollWidth; 实际内容的高度： document.body.scrollHeight; 滚动条下拉被卷起...