第一次知道可以用超链接（锚点）实现回到顶部的时候我是很震惊的，想着原来可以这么简单啊！但是作为一个正在学习JS的小白，不能就这么轻易止步，所以查资料自己整了一个JS的回到顶部。 HTML代码： <div class="container"><p>你好哇</p>... </div> <div id="top">回到顶部</div>CSS代码： .container{border: 1px solid black; } #top{ position: fixed;padding: 10px;width: 20px;border: 1px solid black;box-shadow: 0 0 2px #...
本文实例为大家分享了原生js实现获取form表单数据的具体代码，供大家参考，具体内容如下//获取指定form中的所有的<input>对象 function getElements(formId) { var form = document.getElementById(formId); var elements = new Array(); var tagElements = form.getElementsByTagName(input); for (var j = 0; j < tagElements.length; j++){ elements.push(tagElements[j]); } var tagElements = form.getElementsByTagName(sel...
由于需要， 给按钮组监听点击事件(要求用事件委托)，当有一个按钮被点击时，相应的给该按钮添加一个类(激活类)，其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等到一个 dom 对象(也叫dom元素)， 通过document.getElement……的几种方法得到 如`let element = document.getElementById("box");1.通过类名， 获取类名： el.className， 赋值： el.className = "className" 会覆盖掉原来的类 2.通过属性，获取类名：...
本文实例讲述了原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作。分享给大家供大家参考，具体如下： 一、原生JS forEach()和map()遍历 共同点： ①.都是循环遍历数组中的每一项。 ②.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。 ③.匿名函数中的this都是指Window。 ④.只能遍历数组。 1.forEach() 没有返回值。 var ary = [12,23...
本文实例讲述了原生JS实现逼真的图片3D旋转效果。分享给大家供大家参考，具体如下： 实现效果:实现过程: 步骤一:先写一个简单的html结构,创建一个box盒子,里面放对应的图片(也可以用js创建图片,这里为了好理解,我们直接用html创建). <body><div class="box"><img src="./img/1.jpg" alt=""><img src="./img/2.jpg" alt=""><img src="./img/3.jpg" alt=""><img src="./img/4.jpg" alt=""><img src="./img/5.jpg" alt=""><img src="....
本文实例讲述了原生JS实现的跳一跳小游戏。分享给大家供大家参考，具体如下： 以下说的是闲暇编写的一个小游戏--跳一跳，类似于微信的跳一跳，大体实现功能有： 1.先随机生成地图； 2.按住按钮释放后完成动作并进行判断； 首先po一下代码； 代码如下： <!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" ...
本文实例讲述了原生JS检测CSS3动画是否结束的方法。分享给大家供大家参考，具体如下： 不知道大家在做网页的时候有没有碰到这种情况：当你使用CSS3的动画属性时，想要在动画结束后添加一系列操作，但往往这些操作可能会发生在与动画同时出现或者是在动画还没结束时就发生了。 针对这种情况我们会使用js来监听动画是否结束即它的style的transition属性是否为transitionend;下面我们通过一个简单的例子来理解一下我这句话的含义： 代...
本文实例讲述了原生JS实现的放大镜特效。分享给大家供大家参考，具体如下： 最近在做ecshop的二次开发，遇到一些jquery插件与ecshop的冲突， 调整冲突的需要修改的地方又太多，修改起来得不偿失， 故做了一个原生的js实现商品详情页面的放大镜效果，以避免冲突！ 下面介绍一下代码及实现过程： 首先，创建fangda.html文件 在文件头部的<head></head>中添加文件的css样式，即： <style type="text/css"> #div1 { width:304px; heigh...
本文实例为大家分享了vuejs2.0实现简单拖拽元素功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta charset="utf-8"> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /><style> .select-item {background-color: #5bc...
手动轮播图，为轮播图中的一种，轮播图主要有无缝轮播，手动轮播，延迟轮播，切换轮播等等。。。 轮播图主要用于展现图片，新出商品，词条，又能美观网页。給网页中增加动态效果。 手动轮播，是小编认为最简单的一种轮播方式，既能左右翻页，还能通过悬浮按钮，快速预览图片，所以今天就给大家写一个原生js手动轮播图。 一，利用JavaScript制作手动轮播图，首先排版。 引入默认样式表（可以手写）； <link rel="stylesheet" href="...
大家经常逛淘宝、天猫、京东这类网站的时候往往会看到一些图片展示的效果，例如：把鼠标放在图片上右侧会出现一个放大的预览区域，这就是所谓放大镜效果。今天闲着没事干，就打算复习一下JavaScript基础，用一下基础知识制作一个类似于淘宝的放大镜效果。 先说一下这个效果需要用到的一些基础知识： css相对定位：position：absolute； 鼠标移入移出以及移动事件：onmouseover、onmouseout、onmousemove，记住这些事件一般不会单个...
需要使用vue做一个专题页面。滚动页面指定区域导航高亮。监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加class，其他去掉class进行样式切换。我使用的方法是在定位元素上添加id，在导航添加data-id属性，监听滚动事件，如果当前滚动区域大于定位元素区域，将元素的id赋值给变量，然后与导航的data-id进行匹配，切换class。html结构main.vue <template><div class="qz-home"><d...
浏览器自带的原生下拉框不太美观，而且各个浏览器表现也不一致，UI一般给的下拉框也是和原生的下拉框差别比较大的，这就需要自己写一个基本功能的下拉菜单/下拉选择框了。最近，把项目中用到的下拉框组件重新封装了一下，以构造函数的方式进行封装，主要方法和事件定义在原型上，下面是主要的实现代码并添加了比较详细的注释，分享出来供大家参考。代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,或者直接bable转...
学习前端也有一小段时间了，当初在学习javascript的时候，练手的一个轮播图实例，轮播图也是挺常见的了。 着是通过获取图片偏移量实现的，也实现了无缝切换，还有一点问题就是没有加上图片切换的时候的延迟了。 html: <div id="container"><div id="list" style="left: -600px;"><img src="../image/1.jpg" alt="5"><img src="../image/1.jpg" alt="1"><img src="../image/2.jpg" alt="2"><img src="../image/3.jpg" alt="3"><img ...
废话不多说，直接上图看效果：需求： 点击左右按钮实现切换用户图片与信息； 原理： 点击右侧左侧按钮，把3号的样式给2号，2号的给1号，1号的给5号，5号的给4号，4号的样式给3号，然后根据现在是第几张图片切换成对应的文字； 步骤： 1.让页面加载出所有盒子的样式； 2.把两侧按钮绑定事件(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)； 3.书写函数： 操作函数：左按钮：删除第一个，添加到最后一个； 右按钮...