关注互联网发展
JavaScript
很久没更新了,分享一个豆瓣的CSS和js开发规范
十一 18th
几个月没更新了,最近专注于运营和推广了,技术方面有点生疏,今天看到twitter上有人分享了豆瓣的css和js的规范,感觉不错,比较适合中小型网站建设初期规范的建立,规范的建立对以后修改和协作更容易。这个豆瓣的规范具有不错的参考价值适合前端开发和准备加入前端开发工程师的朋友来来学习。
豆瓣CSS开发规范
https://docs.google.com/document/pub?id=17dKkWwdaKyNnkwswihHje2cfoMGqbSJLydTIxqFwlQU
豆瓣Javascript代码风格规范
https://docs.google.com/document/pub?id=17ICSeE4Qd04-1U-pphmKCAmfgJGEVjqDellbu4oAiqU
以后博客的方向可能有所改变,开始尝试写一些网站运营,宣传推广方面的经验了。
推荐一个不错的jq的UI库
八 25th
最近忙着移动网站改版的任务,博客也有近两周没更新了,在这次改版的过程中发现了不少好用的东西将陆续来分享。
今天要介绍的就是一个非常好用的jq的UI库,叫jquery tools,它的官方网站是http://flowplayer.org/tools/index.html这个UI库提供了我们在做网站的过程中需要用到的一些常用JS效果的方案,我试用了一下常用的tab和Scrollable感觉还比较灵活,配合CSS可以实现我们想做的大多数效果。
这个UI库包含了6大工具
1、选项卡功能(Tabs)
2、提示工具条功能(ToolTips)
3、信息滚动功能(Scrollable)
4、遮罩效果(overlay)
5、突出效果(expose)
6、Flash嵌入
http://css9.net/flexible-ui-library-jquery-tools/这个博客上对这个UI库有比较详细的说明,我就不赘述了。有兴趣的可以尝试一下。
根据访问者分辨率,自动调用不同版式CSS的代码
七 8th
虽然现在已经基本淘汰800分辨率了1024已经成为主流,但是随着大屏幕液晶的不断降价,更高的分辨率将会逐步成为主流,为了适应越来越大的分辨率,有时候我们会采用流体布局,但是流体布局有时候也有局限性,下面一段js可以实现根据用户客户端分辨率的不同,调用不同的css代码来实现适应不同分辨率的效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var Swidth = screen.width; var Surl = "http://www.yours.com/"; var Skin = ["cssstyle1.css", "cssstyle2.css"]; var Skintemp; if (Swidth >= 1280) { Surl += "skin_1200"; } else { Surl += "skin"; } for (var i = 0; i < Skin.length; i++) { Skintemp = document.createElement("link"); Skintemp.type = "text/css"; Skintemp.rel = "stylesheet"; Skintemp.href = Surl + "/" + Skin[i]; document.getElementsByTagName("head")[0].appendChild(Skintemp); } |
一个可以多页签切换的JS焦点图代码
三 4th
最近的一个项目,在一个tab的区域,每个tab里面都有一个焦点图(没办法,客户的要求就是这么怪),需要用CSS和js实现。 网上找了好久没找到合适的代码,就自己试着写了一个,代码逻辑不是很清晰,而且只适用于目前的三个tab,每个tab里面有5点焦点图的情况。毕竟是第一次写程序,好在实现了功能。以下是js代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | //焦点图 var n=0; var num=1; var c=new Array(0,5,10); function Mea(value){ n=value; if (value<5) { num=1; } else if ( value>4&value<10 ) { num=2; } else if (value>9) { num=3; } v = value-5*(num-1); aunum = "au"+num; setBg(value); plays(v); conaus(v); } function setBg(value){ for(var i=0;i<5;i++) { ii=5*(num-1)+i; document.getElementById("t"+ii+"").className="bbg0"; } document.getElementById("t"+value+"").className="bbg1"; } function plays(v){ try { document.getElementById("au"+num).filters[0].Apply(); var d = document.getElementById("au"+num).getElementsByTagName("div"); for(i=0;i<5;i++)i==v?d[i].style.display="block":d[i].style.display="none"; document.getElementById("au"+num).filters[0].play(); } catch(e) { var d = document.getElementById("au"+num).getElementsByTagName("div"); for(i=0;i<5;i++)i==v?d[i].style.display="block":d[i].style.display="none"; } } function conaus(v){ try { with ("conau"+num){ for(i=0;i<5;i++)i==v?children[i].style.display="block":children[i].style.display="none"; } } catch(e) { var d = document.getElementById("conau"+num).getElementsByTagName("div"); for(i=0;i<5;i++)i==v?d[i].style.display="block":d[i].style.display="none"; } } //tab激活该tab的自动播放 function autorun(m){ for(i=0;i<3;i++){ if(i==num-1){ c[i]=n; } } clearAuto(); if(m==num){ setAuto(); } else{ num=m; n=c[m-1]; setAuto(); } } function clearAuto(){clearInterval(autoStart)} function setAuto(){autoStart=setInterval("auto(n)", 3000)} function auto(){ n++; if(n>5*(num-1)+4)n=5*(num-1); Mea(n); conaus(n-5*(num-1)); } setAuto(); |
然后在tab的每个tab上加上autorun(1);autorun(2);autorun(3)…
全部代码直接看实例页面吧
让IE支持min-height/width max-height/width 的JS
一 23rd
ie不支持min-width/max-width min-height/min-width有时候做些效果有些不便,这个js可以让IE支持这个效果 minmax.js
图片超过大小自动缩放代码
一 22nd
以下是网页中图片超过指定大小自动缩放,并且可以点击看大图的代码
[CODE=javascript] //改变图片大小 function resizeImg() { var contentwidth=565;//设置图片最大宽度 var imageAll=document.getElementById("con").getElementsByTagName("img");//con为图片所在层的ID var turewidth,tureheight; if (imageAll !=null) { for (i=0; iimageAll[i].width) { if(imageAll[i].height==tureheight) { imageAll[i].style.height=imageAll[i].height/turewidth*imageAll[i].width+"px"; } imageAll[i].onclick=function(){window.open(this.src)}; imageAll[i].style.cursor="pointer"; imageAll[i].title="点击查看原始尺寸:"+turewidth+"*"+tureheight+"px"; } else { imageAll[i].style.width=turewidth+"px"; } } } } if (window.addEventListener) window.addEventListener("load", resizeImg, false); else if (window.attachEvent) window.attachEvent("onload", resizeImg); else window.onload=resizeImg [/CODE]
由修改漂浮广告代码而学到的DOCTYPE声明对JS的影响
一 21st
经常有些JS代码明明在别人网页上可以运行,拷贝过来运行却出错,这个时候可以检查下是不是DOCTYPE声明的问题
在没有DOCTYPE声明的情况下:
document.body.clientWidth
document.body.clientHeight
为当前窗口的宽度/高度;
在DOCTYPE声明以后
document.body.clientWidth
document.body.clientHeight
为整个页面的宽度/高度;
document.documentElement.clientWidth
document.documentElement.clientHeight
为当前窗口的宽度/高度;
同样增加DOCTYPE声明后
document.body.scrollLeft
document.body.scrollTop
要改为
document.documentElement.scrollLeft
document.documentElement.scrollTop