现在的页面上有许多各种各样的页面效果，常用的有弹出层效果，无缝滚动效果，选项卡切换效果。今天分享一款自己用原生javascript写的选项卡切换效果，由于本人水平有限，如有问题请指出。 效果图如下： html代码： 代码如下: js-tabs a{color:#a0b3d6;} .tabs{border:1px solid #a0b3d6;margin:100px;width:300px;} .tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1p...
代码如下: /* 拖拽流程： 1、第一步点击需要拖动的元素 2、在点击下的元素被选中，进行move移动 3、当鼠标弹起的时候，停止动作 4、点击元素oDIV的时候，可用的是oDIV区域，而move和up则是全局区域，也就是整个文档通用，即应该用document */ oDIV = document.getElementById("gaga"); oDIV.onmousedown = function( e ){ // 当鼠标点击下去的时候 var diffX = e.clientX - oDIV.offsetLeft; // 点击的位置距离浏览器最左边的位置(...
代码如下: $(document).ready(function(){ $("#selectAll").click(function(){ //这里也可以直接用this,原生js语句 if($(this)[0].checked){ $('[name=items]:checkbox').attr("checked",true); }else{ $('[name=items]:checkbox').attr("checked",false); } }); $("#XOR").click(function(){ $("[name=items]:checkbox").each(function(){ this.checked=!this.checked; }); }); }); Untitled Document 足球 足球 足球 足...
代码如下: document.onmousedown = function( e ){ alert(getButton(e)) // e.button W3C是获取鼠标按键 0 表示左键 1表示中键 2表示右键 而IE浏览器则是 1表示左键 4表示中间 2表示右键 这里的IE浏览器主要是IE8以下的浏览器 }; function getButton(e){ /* 1、window.event这个属性IE和Chrome都是支持的 2、但是Chrome也是支持W3C的 3、所以，如果说W3C和IE都支持的话，那么就已W3C做为标准化 */ if( e ){ // 作为第一次判断Chrom...
代码如下: document.onclick = function(e){ alert(getKey(e)); }; function getKey(e){ var e = e || window.event; var keys = []; if(e.shiftKey){ keys.push("shift键"); }; if(e.ctrlKey){ keys.push("ctrl键"); }; if(e.altKey){ keys.push("alt键"); }; return keys; };
代码如下: var header1 = document.getElementById("header"); var p = document.createElement("p"); // 创建一个元素节点 insertAfter(p,header1); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法 function insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置 var parent = targetElement.parentNode; // 找到指定元素的父节点 if( parent.lastChild =...
代码如下: window.onload = function(){ var gaga = document.getElementById( "gaga" ); addClass( gaga,"gaga1" ) addClass( gaga,"gaxx" ); removeClass( gaga,"gaga1" ) removeClass( gaga,"gaga" ) function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 （\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便...
一些简单的例子，用原生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 #cc...
代码如下: 弹出提示 * { margin: 0; padding: 0; font-size: 12px; } html, body { height: 100%; width: 100%; } #content { background: #FFFFFF; padding: 30px; height: 100%; } #content a { font-size: 30px; color: #369; font-weight: 700; } #alert { z-index:2; border: 1px solid #369; width: 300px; height: 150px; background: #e2ecf5; z-index: 1000; position: absolute; display: none; } #alert h4 { heig...
原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览：http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 代码如下: 原生Js页面滚动延迟加载图片 *{margin: 0;padding: 0} img.scrollLoading{border: 1px solid #ccc;display: block;margin-top: 10px;} var _CalF = { $ : function(object){//选择器 if(object === und...
经常看到网页里图片渐变显示，自己写一个。 原理很简单就是修改元素的css透明度。 在线预览效果：http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/ 代码如下: 原生Js元素渐隐/渐显方法 渐显 渐隐 function alphaPlay(obj,method){ //method有两个值show或hiden var n = (method == "show") ? 0 : 100, ie = (window.ActiveXObject) ? true : false; var time = setInterval(function(){ if(method == "show"){ if(n n+...
从一个表单checkbox获取到已选中的数据值： 代码如下: aa bb cc dd 采用原生JS写法： 代码如下: function checkedValues(){ var arr=new Array(); var checkbox=document.getElementByName(cb); for(var i=0;i<checkbox.length();i++){ if(checkbox[i].checked==true){ arr.push(checkbox[i].value); alert(checkbox[i].value); } } }
代码如下: JSON序列化与解析（原生JS + Object对象拓展方法）【IE6和chrome测试通过】 var ele = { x:11, y:'string', z:{x:11, y:'string'} } toJSON = function(obj){ var arr = []; for(var key in obj){ var value = obj[key]; if(value == null){ value = ''; }else{ value = (typeof value === 'string' | typeof value === 'number') ? ('"' + value + '"') : toJSON(value); } var str = '"' + key + '":' + value;...
代码如下: cities = new Object(); cities['台湾']=new Array('台北','台南','其他'); cities['马来西亚']=new Array('Malaysia'); cities['北京']=new Array('北京'); cities['上海']=new Array('上海'); cities['天津']=new Array('天津'); cities['重庆']=new Array('重庆'); cities['河北省']=new Array('石家庄', '张家口', '承德', '秦皇岛', '唐山', '廊坊', '保定', '沧州', '衡水', '邢台', '邯郸'); cities['山西省']=n...
一些简单的例子，用原生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 #cc...