摘要：
翻屏 阅读全文
随笔分类 - javascript
手机项目常用知识小记
2015-04-08 10:10 by 边缘er, 163 阅读, 收藏,
摘要：
1.用pc的思路做mobile，写死页面宽度2.改变jquery mobile滑动初始值$.event.special.swipe.horizontalDistanceThreshold = 10;3.判断是否为微信内置浏览器function is_weixin(){ var ua =... 阅读全文
fixed定位
2012-08-19 20:37 by 边缘er, 1141 阅读, 收藏,
摘要：
function fixedBar(o){ var bar = document.getElementById(o.id), width = bar.offsetWidth, height = bar.offsetHeight, dir = o.dir, at = o.at, left = o.left, right = o.right, top = o.top, bottom = o.bottom, body = document.body, ht... 阅读全文
返回顶部按钮js挂件
2012-07-09 17:18 by 边缘er, 321 阅读, 收藏,
摘要：
(function(){ var img = {imgW:50, imgH:50, right:5, bottom:5, imgSrc:'images/gototop.png'}, body = document.body, html = document.documentElement; //获取滚动条高度 function getPageScroll(){ var yScroll; if (html && html.scrollTop){ yScroll = html.scrollTop; } else if (body) { yScroll = body. 阅读全文
判断加载document、script、link可用时刻
2012-02-19 20:49 by 边缘er, 2172 阅读, 收藏,
摘要：
ie各个方面都有自己独特的方法，它为DOM中某些部分提供了readystatechange事件。支持readystatechange事件的对象都有readystate属性。readystate共有以下几个值：uninitialized： 对象存在但未初始化；loading：对象正在加载；loaded：对象数据加载完毕；interactive：可以操作对象了，但还没加载完毕；complete：加载完毕。注意上面5个值并不一定每个事件都全包含，并且不一定是什么顺序。下面讲到的加载会用到上面的内容。1.document加载众所周知 window.onload是等待所有资源加载完毕（包括图像）。想要实 阅读全文
javascript设计模式小记
2012-02-18 08:31 by 边缘er, 1258 阅读, 收藏,
摘要：
一、单体模式用于保存一组属性或方法（简单的可以是一个对象字面量），如果可实例化，只能被实例化1次（即return）。(function(){ ... return { .... }})()可用来划分划分命名空间，封装私有属性和方法（return出来的是公用接口）；可实现惰性加载（再一步封装，在使用时才实例化）；还可以实现分支技术。二、工厂模式在一个方法中，需要用到几个类的实例，而这些类都实现了相同的接口（可能派生自一个类），所以可以互换使用。把创建这些类的实例的代码单拿出来放在一个地方（可以是一个单体或一个新建的类中等），这个地方就是工厂。工厂可以弱化对象之间的耦... 阅读全文
静态iframe异步加载
2012-02-18 08:22 by 边缘er, 1115 阅读, 收藏,
摘要：
tab选项卡中内容过多时候用到的iframe。<ul id="nav_ul"> <li>第一个iframe</li> <li>第二个iframe</li> <li>第三个iframe</li></ul><div class="iframe_cont"></div><div class="iframe_cont"></div><div class="iframe_cont&quo 阅读全文
placeholder
2012-02-18 08:18 by 边缘er, 494 阅读, 收藏,
摘要：
html5原生支持placeholder，对于不支持的浏览器（ie），可用js模拟实现。(function(){ //判断是否支持placeholder function isPlaceholer(){ var input = document.createElement('input'); return "placeholder" in input; } //不支持的代码 if(!isPlaceholer()){ //创建一个类 function Placeholder(obj){ ... 阅读全文
js上一张图片下一张图片
2012-02-18 08:15 by 边缘er, 1605 阅读, 收藏,
摘要：
实现效果：鼠标经过左半部分，显示左按钮，点击显示上一张图；鼠标经过右半部分，显示右按钮，点击显示下一张图。有淡入淡出效果。js代码：function picNext(id){ var picBox = document.getElementById(id), picArray = picBox.getElementsByTagName('img'), len = picArray.length, boxWidth = picBox.offsetWidth; picArray[0].style.display = 'block'; //... 阅读全文
js轮播广告
2012-02-18 08:12 by 边缘er, 410 阅读, 收藏,
摘要：
淡入淡出js轮播广告，写法类似自动播放的tab选项卡，加入了淡入淡出效果。js代码：function lunbo(contClass, numArr, normalClass, hoverClass){ function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; ... 阅读全文
渐隐渐现fade js
2012-02-18 08:09 by 边缘er, 343 阅读, 收藏,
摘要：
function fadeIn(el){ el.style.opacity = 0; el.style.filter = 'alpha(opacity = 0)'; el.style.display = 'block'; var n = 0; function fadeShow(){ if (n < 1){ n += 0.1; el.style.opacity = n; el.style.filter = 'alpha(opacity = '+n*100+')'; ... 阅读全文
左右按钮-自动滚动
2012-02-18 08:05 by 边缘er, 317 阅读, 收藏,
摘要：
js代码：function lrAuto(overHide, leftBtn, rightBtn, num){ //获取前3个参数 var doc = document, overHide = doc.getElementById(overHide), leftBtn = doc.getElementById(leftBtn), rightBtn = doc.getElementById(rightBtn); //判断内容太少不需要滚动和按钮 var scrollUl = overHide.getElementsByTag... 阅读全文
撕拉广告
2012-02-17 21:58 by 边缘er, 258 阅读, 收藏,
摘要：
js代码var sila = (function(){ return { silaCss : 'position:absolute; top:0; right:0; overflow:hidden', closeCss :'position:absolute; width:20px; heigth:20px; bottom:0; left:0; overflow:hidden', smallSize : 80, smallPic : 'images/small.jpg', bigSize : 300, b... 阅读全文
静态分页
2012-02-17 21:56 by 边缘er, 231 阅读, 收藏,
摘要：
html<div id="page_box"> <ul class="list_ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10< 阅读全文
分享到...插件
2012-02-17 21:53 by 边缘er, 735 阅读, 收藏,
摘要：
可实现行内和侧边2种方式。var wmShare = (function(){ return { //初始值 skin : 'slide_black', url : encodeURIComponent(top.location.href), title : encodeURIComponent(top.document.title), pic : '', //获取参数方法 getParameter : function(){ var scripts = documen... 阅读全文
锁屏-lightbox效果
2012-02-17 21:30 by 边缘er, 319 阅读, 收藏,
摘要：
锁屏就是弹出半透明的遮罩层，把整个页面遮住不能操作，然后上边有一个可操作窗口，类似lightbox效果。<span onclick="lightbox.lockScreen('white')">锁屏并弹出层</span><span onclick="lightbox.openScreen('white')">关闭弹出层并解锁</span>说明：lightbox.lockScreen和lightbox.openScreen分别是锁屏和解锁方法，“white”是要弹出层的id，样 阅读全文
ajax的使用原理
2012-02-17 21:11 by 边缘er, 277 阅读, 收藏,
摘要：
XMLHttpRequest对象ajax的核心对象是XMLHttpRequest，首先创建一个跨浏览器的xhr方法，function createXHR(){ var xhr; try{ xhr = new XMLHttpRequest(); }catch(MS){ try{ xhr = new ActiveXObject('Msxml2.XMLHTTP'); }catch(MS){ try{ xhr = new ActiveXObject('Microsoft... 阅读全文
jq三级导航菜单--可修改为二级、四级等导航菜单
2012-02-17 21:00 by 边缘er, 1097 阅读, 收藏,
摘要：
此导航菜单为三级导航菜单，可以通过简单的修改变换成二级或四级导航菜单使用。虽然没有无限级导航那么智能，3级导航已经够用，导航太深的话，对用户体验不好。此代码参考自《JQ攻略》，原书代码的样式虽略有问题（这里已修改），但代码相当简洁清晰，值得借鉴。body,ul,li{ margin:0; padding:0;}a{ text-decoration:none; color:#000;}ul{ list-style:none;}.nav_ul{ height:30px; margin:50px 0 0 50px;}.nav_ul li{ float:left; background-color:# 阅读全文
对联--随滚动条滚动的层（多重判断）
2012-02-17 20:46 by 边缘er, 343 阅读, 收藏,
摘要：
一个悬浮的层，随屏滚动；可选左右两边（运行2次即可做对联）；可选在最左边或最后边，也可以紧贴页面内容左右（如果页面内容宽度1002，而显示器分辨率为1900，可使悬浮广告紧贴1002内容）；可设置头和底高度，无论如何滚动也不会盖住头底。js代码function scrollBar(scrollId, o){ //获取滚动条高度 function getPageScroll(){ var yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; } e... 阅读全文
tab选项卡-可自动播放
2012-02-17 20:36 by 边缘er, 685 阅读, 收藏,
摘要：
效果如图，此代码设计是考虑到tab标签不是文字+背景的模式，默认效果和当前效果都是图片。也就是每个tab标签需要2个样式情况。如果项目只需要文字+背景图的tab标签，可以样式合并，或者略微改下js去掉+(n+1)。js代码function tab(classArr, normalClass, hoverClass, contClass, auto){ function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) ... 阅读全文
浙公网安备 33010602011771号