轮播图是现在网站网页上最常见的效果之一，对于轮播图的功能，要求不同，效果也不同。我们见过很多通过不同的方式，实现这一效果，但是有很多比较麻烦，而且不容易理解，兼容性也不好。在这里分享一下，用js原生代码，实现轮播图的常见效果！思路比较清晰，而且可重复性高，也几乎包含了现在网页上轮播实现的所有效果！ 一、现在我们来看看它是什么样的效果，截一张图给大家看：二、无论我们做什么特效，都要记住一个原则，先写静态...
咱们刚刚说了js原生轮播图，现在给他加上可以随着一起走动的小圆点吧！ css代码： *{margin:0px;padding: 0px;}ul{width: 2500px;height: 300px;position: absolute;}li{float: left;list-style: none;}img{width: 500px;height: 300px;}div{width: 500px;height: 300px;margin: 50px auto;position: relative;overflow: hidden;}/*小白点的ul*/#round_ul{width:300px;height: 30px;/*background:yellow;*/position: relative;marg...
哈喽！我的朋友们，最近有一个新项目。所以一直没更新！有没有想我啊！！ 今天咱们来说一下JS原生轮播图！ 话不多说： 直接来代码吧：下面是CSS部分： *{padding: 0px;margin: 0px;}img{width: 500px;height: 300px;}li{float: left;}ul{width: 2000px;list-style: none;position: absolute;}div{width: 500px;height: 300px;/*溢出部分隐藏*/overflow: hidden;margin: 60px auto;position: relative;}HTML部分！ <div><ul><li><im...
原理及概念 AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是一种用于创建快速动态网页的技术。 动态网页：是指可以通过服务器语言结合数据库随时修改数据的网页。 静态网页，随着html代码的生成，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。 AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下...
在jQuery之焦点图转换-左右的基础上，将jQuery代码改成js原生，并添加定时器（setInterval()和clearInterval()） <!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>焦点图转换--原生和定时器</title><link rel="stylesheet" href="css/reset.css"><style type="text/css">.pic-show{width: 480px;overflow: hidden;}#pic{width: 1920px;height: 320px;position: relative;}#pic img{display: block;float: le...
可拖动 网页中的图像、链接和文本是浏览器默认可以被拖动的，HTML5 为所有的HTML元素都提供了一个draggable属性，当这个属性的值为true的时候，元素被视为可以拖动。 拖动图像或者链接时，将鼠标放在图像或者链接上，按住鼠标不放就可以拖动它。拖动文本时，要先选中文本，然后可以像拖动图像一样拖动选中的文本。 被拖动的元素事件 拖动图片时依次触发：drapstart,drag,dragend事件。这三个事件的目标都是被拖动的元素。 按下鼠标...
注明：本人学习javascript时间不长，最近一直在做web端的手机网页和微信应用，由于最近有用到类似fastclick的功能，在原来的程序中用touchstart和touchend事件模拟，现在尝试将其封装，得到了以下两种有问题的方案。分享给大家，另求大神指导 在手机端Web app开发中，click事件的300ms的延迟，会造成响应缓慢，尤其在低端机中尤为明显。而使用touchstart或者touchend事件，会和默认的滚轮事件发生冲突，这也不是我们所期望的。 所以...
刚刚从培训班学习完,总想写一下东西,自从进入了这个院子,每次出现问题,总是能找到一些答案,给我一些帮助. 作为新手,就写一下简单的吧,院子里面有很多大牛, 说句实话,他们的很多代码我都看不懂. 我就写一下新手看的懂得吧, 多说一句,我觉得大牛写的代码应该通俗易懂才可以。. 代码非常的简单,但是写的过程中,仍然发生了一些小错误,最后还是解决了。 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>手写js跨...
javascript/js的ajax的GET请求： <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; } // -----------ajax方法-----------// function getLabelsGe...
我们先看一下三种算法以及在各种浏览器下的表现。第一种： 直接操作dom。 代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> </head> <body><script>microtime = function(get...
appendChild 主要是用来追加节点 插入到最后 代码如下:window.onload = function(){ var ul2 = document.getElementById(ul2); var oli = document.getElementsByTagName(li); for(var i=0;i<oli.length;i++){ ul2.appendChild(oli[i]); } } <h3>讲Id为ul1的内容插入到ul2里面</h3> <ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <ul id="ul2"> </ul> 把ul1内容插入到ul2里面，这个其...
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script> /* * splice(start, deleteCount, data1, data2, data3...) * */ var arr = [a, b, c, d, e]; //1, 3 // [8,6,4] //[a,8,6,4] //arr.splice(-5); //console.log(arr);function arrSplice(data, start, deleteCount) {// 如果start不是数字，或不能转成数字，start默认就为0if (isNaN(start)) {start = 0;}start = Number(sta...
注明：本人学习javascript时间不长，最近一直在做web端的手机网页和微信应用，由于最近有用到类似fastclick的功能，在原来的程序中用touchstart和touchend事件模拟，现在尝试将其封装，得到了以下两种有问题的方案。分享给大家，另求大神指导在手机端Web app开发中，click事件的300ms的延迟，会造成响应缓慢，尤其在低端机中尤为明显。而使用touchstart或者touchend事件，会和默认的滚轮事件发生冲突，这也不是我们所期望的。所以，...
开篇日常立个flag…… 前言 最近在做一些应用，类似于单页应用，想实现类似于 Vue 路由的效果。 但是个人 Vue 基础四舍五入约等于无，而且看着 Vue-router 吃力+用不起来（因为我的项目前后端不分离，而且使用的 js 语法基本上停留在远古时代：ES5甚至更久远以前……） 之前尝试过模拟，但是模拟太痛苦了，而且一堆问题，还不好维护。 于是想着自己用原生 js 写一个简单的单页应用路由吧。 效果 话不多说，先上效果图 源码 gi...
当我发现Node.js是使用V8 JavaScript引擎构建的时候,我想：Great, web scraping will be easier as the pagewill be rendered like in the browser, with a“native” DOM supporting XPath and any AJAX calls onthe page executed.>当它使用与Chrome相同的JavaScript引擎时,为什么它没有原生DOM？>为什么它没有在检索到的页面中运行JavaScript的模式？>我不了解JavaScript引擎与Web浏览器中的引擎有什么关系？ 非常感谢！解决方法...