滑轮滚动页面的事件在网页特效中进场遇到，但是在不同浏览器下的实现方式又不同。下面我实现的方法，兼容常见浏览器。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...
在IE浏览器中添加或删除事件用attachEvent、detachEvent。在其他标准浏览器中则用addEventListener、removeEventListener。下面的对事件的添加和删除做了封装。直接看代码吧！/** * @description 事件绑定，兼容各浏览器 * @param target * 事件触发对象 * @param type * 事件 * @param func * 事件处理函数 */ function bind(target, type, func) { if (target.addEventListener) {// 非ie 和ie9 target.addEventListener(type, f...
熟悉jq的朋友可能会偶尔用到判定当前浏览器是否为ie，甚至是具体到ie哪个版本。比如说判定当前浏览器是ie7 ，写法如下：if($.browser.msie && $.browser.version==7){ //ie7下执行该区域代码 }原生js，仿jq写法，具体实现代码：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 isIE = /msi...
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的对象属性和方法都扩展进前面复制得到的对象中并输出。var o1={hello:1,old:555}...
很多网页在下方都会放置一个“返回顶部”按钮，尤其是页面底部没有导航的网页，这样可以帮助访客重新找到导航或者重温一遍广告（想得真美）。随着近几年来 JavaScript 的应用日渐广泛，滑动效果无处不在，于是我也跟跟风，将返回顶部功能做成了滑动效果。后来为了更贴合物理特征， 改造做成了减速的滑动效果。 首先说一下原理吧，我们会获取滚动条到页面顶部的距离，然后上移一定的距离；再获取滚动条到页面顶部的距离，上移一定的...
听说是最常用。。。。我是看了dom编程艺术想到的。无标题文档 .ca{background-color:red; padding:20px;} .js{ border:1px solid #00F; padding:10px;} sss function getElementsClass(classnames){ var classobj= new Array();//定义数组 var classint=0;//定义数组的下标 var tags=document.getElementsByTagName("*");//获取HTML的所有标签 for(var i in tags){//对标签进行遍历 if(tags[i].nodeType==1){//判断...
一些简单的例子，用原生js和jQuery实现随意改变div属性，和重置。代码如下：函数传参，改变Div任意属性的值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;text-align:right;} input{padding:3px;font-family:inherit;border:1px solid #ccc;} #div1{color:#f...
创建遮罩层代码如下:_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);newMask.style.width = _scrollWidth + "px";n...
月份的判定，由于涉及到过多了判定条件，如果用if else会大大降低性能，建议用switch 语法 代码如下：代码如下:getDays:function(year,month){// var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];// 二月份的天数数据处理var FedDays = year%4==0?29:28,returnDays = ;var month = month<10?month = 0+month:month.toString();switch(month){case 01:case 03:case 05:case 07:case 08:case 10:case 12: returnDays = 31;brea...
纯文本loading效果，可以自己定义颜色和速度代码如下: /** Loading animation* Created by 黑と白の印記 on 15/03/11.*/ function loading(element,lightColor,darkColor,speed,callback){if(!element&&(!element.innerText||!element.textContent))returnelement = typeof element==="string"?document.getElementById(element):elementlightColor = lightColor||"#fff",darkColor = darkColor||"#000",speed = speed||300var ar...
本文实例讲述了原生Js实现简易烟花爆炸效果的方法。分享给大家供大家参考。具体分析如下： 实现原理： 在一定范围内，随机生成一些div，形成烟花效果代码如下:js烟花效果document.onclick=function (ev) {var oEvent=ev||event;var aDiv=[];var oDiv=null;var _oDiv=document.createElement('div');var i=0;var x=oEvent.clientX;var y=oEvent.clientY;_oDiv.style.position='absolute';_oDiv.style.background='red';_oDiv.style....
想转html5游戏开，这是学习练手的东西，最开始是用面向过程的方式实现，后面用面向对象的方式实现(被坑了)…… 演示地址:http://runjs.cn/detail/ss8pkzrc html代码掷色子的游戏你的游览器不支持html5的画布元素，请升级到IE9+或使用firefox、chrome这类高级的智能游览器！游戏规则：1、一个玩家、两个色子，每个色子有1-6个点，点数随机出现，点数是2-12中的任意数字2、如果玩家第一次抛出 7 或者 11，则本回合胜利 进行下一回合3...
演示地址:http://runjs.cn/detail/yjpvqhal html代码小飞龙的跳球你的游览器不支持html5的画布元素，请升级到IE9+或使用firefox、chrome这类高级的智能游览器！var canvas = document.getElementById('game');var ctx = canvas.getContext('2d');var grad;//盒子的起始位置和大小以及球的半径var box = {x:20,y:20,w:350,h:350,r:20};//球的中心位置和偏移位置var inbox = {//box内的限制范围bx:(box.w+box.x-box.r),by:(box.h+box...
原生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 1000) value = 1000;minBoxWidt...
先在之前做的抖动窗口上做了点动作 无限变色Documentdiv{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;}window.onload=function(){// 得到0--255的随机数function getRandNumber(rmin,rmax){var cha = rmax-rmin;var ra...