总的来说思路比较简单，就是先获取节点，然后对节点进行相应的处理,下面是完整的页面代码： 原生js：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>原生js tab</title> <style type="text/css"> .tab{margin:10px auto;position:relative;width:300px; } ul,li{list-style-type:none;padding:0;margin:0;font:13px/20px SimSun,arial;color:#333;...
（1）首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分（其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方（也就是一个banner吧） 3.然后是一个图片组（可以用新的div 也可以直接使用 ul-->li形式） 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层，放在图片底部 6.然后是一个图片描述info层，放在透明背景层的左下角（div 或 ul-->li) 7.然后是一个按钮层，用来定位图片组的index吧,放在...
使用方法： 分别引用css文件和js文件 如： <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script>html: <li><a href="/"><img src="img/1.jpg" /></a></li> <li><a href="/"><img src="img/2.jpg" /></a></li> <li><a href="/"><img src="img/3.jpg" /></a></li> javascript: window.onload=function(){ photoSlide({...
原生JS实现的瀑布流布局，代码及demo代码地址：https://github.com/leozdgao/responsive_waterfall Demo：http://leozdgao.github.io/demo/responsive_waterfall/ 演示图：核心代码： responsive_waterfall.js (function() {var Waterfall = function(opts) {var minBoxWidth;Object.defineProperty(this, minBoxWidth, {get: function() { return minBoxWidth; },set: function(value) {if(value < 100) value = 100;if(value > 1...
先在之前做的抖动窗口上做了点动作 无限变色 <!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div{text-align: center;line-height: 150px;font-weight: bold;}#dv{width: 300px;height: 150px;position: absolute;left: 200px;top: 100px;background: red;}#dv2{width: 300px;height: 150px;position: absolute;left: 600px;top: 100px;background: yellow;}</style><script>window...
演示地址:http://runjs.cn/detail/yjpvqhal html代码 <html><head><meta charset="utf-8"/><title>小飞龙的跳球</title></head><body onload="init()"><canvas id="game" width="400" height="400" style="border:1px solid #c3c3c3">你的游览器不支持html5的画布元素，请升级到IE9+或使用firefox、chrome这类高级的智能游览器！</canvas><script>var canvas = document.getElementById(game);var ctx = canvas.getContext(2d);var...
本文实例讲述了原生Js实现简易烟花爆炸效果的方法。分享给大家供大家参考。具体分析如下： 实现原理： 在一定范围内，随机生成一些div，形成烟花效果代码如下:<!doctype html> <html> <head> <meta charset="utf-8"> <title>js烟花效果</title> <script type="text/javascript"> document.onclick=function (ev) { var oEvent=ev||event; var aDiv=[]; var oDiv=null; var _oDiv=document.createElement(div); ...
纯文本loading效果，可以自己定义颜色和速度代码如下: /** Loading animation * Created by 黑と白の印記 on 15/03/11. */ function loading(element,lightColor,darkColor,speed,callback){ if(!element&&(!element.innerText||!element.textContent))return element = typeof element==="string"?document.getElementById(element):element lightColor = lightColor||"#fff",darkColor = darkColor||"#000",spe...
创建遮罩层代码如下: _createCover: function() { var newMask = document.createElement("div"); newMask.id = this._mark; newMask.style.position = "absolute"; newMask.style.zIndex = "100"; _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth); _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight...
一些简单的例子，用原生js和jQuery实现随意改变div属性，和重置。代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>函数传参，改变Div任意属性的值</title> <style type="text/css"> body,p{margin:0;padding:0;} body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;} #outer{width:300px;margin:0 auto;} p{margin-bottom:10px;} button{margin-right:5px;} label{width:5em;display:inline-block;...
很多网页在下方都会放置一个“返回顶部”按钮，尤其是页面底部没有导航的网页，这样可以帮助访客重新找到导航或者重温一遍广告（想得真美）。随着近几年来 JavaScript 的应用日渐广泛，滑动效果无处不在，于是我也跟跟风，将返回顶部功能做成了滑动效果。后来为了更贴合物理特征， 改造做成了减速的滑动效果。 首先说一下原理吧，我们会获取滚动条到页面顶部的距离，然后上移一定的距离；再获取滚动条到页面顶部的距离，上移一定的...
听说是最常用。。。。我是看了dom编程艺术想到的。 <!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>无标题文档</title> <style> .ca{background-color:red; padding:20px;} .js{ border:1px solid #00F; paddin...
jq的extend()方法能很方便的实现扩展对象方法，语法如下：$.extend(obj1,boj2,obj3); 现在要实现的是：原生js实现复制对象，扩展对象，类似jq中的extend()方法，具体实例如下： 现有3个对象字面量：var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999};实现目标： 复制o1对象，把 o2,o3的对象属性和方法都扩展进前面复制得到的对象中并输出。 <script> var o1={hello:...
熟悉jq的朋友可能会偶尔用到判定当前浏览器是否为ie，甚至是具体到ie哪个版本。比如说判定当前浏览器是ie7 ，写法如下： if($.browser.msie && $.browser.version==7){ //ie7下执行该区域代码 }原生js，仿jq写法，具体实现代码： <script> var browser = (function(){ var isIE6 = /msie 6/i.test(navigator.userAgent); var isIE7 = /msie 7/i.test(navigator.userAgent); var isIE8 = /msie 8/i.test(navigator.userAgent); var ...
滑轮滚动页面的事件在网页特效中进场遇到，但是在不同浏览器下的实现方式又不同。下面我实现的方法，兼容常见浏览器。 function getData(event){ var e = event || window.event; //获取滚动距离(FF每次滚动 data为3或者-3，其他为120或者-120) var data = e.detail || e.wheelDelta; alert(data); } //IE之外的绑定事件方法 if(document.addEventListener && !document.attachEvent) { document.addEventListener(mousewh...