最新日志

最佳IE6环境下实现PNG-24的应用方案

运用JS实现IE6下的PNG透明效果
相关JS地址：
http://www.14pc.com/demo/ie6png.js
方法：
在使用PNG的页面中引用代码
<!–[if IE 6]>
<script type=”text/javascript” src=”下载下来的JS路径”></script>
<script>
DD_belatedPNG.fix(’CSS选择器, 应用类型’);
</script>
<![endif]–>

引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用PNG的CSS选择器（可使用ID选择器和类选择器）和应用类型（分为img和background两种）。
如DD_belatedPNG.fix(’#box-one, img’) 或者 DD_belatedPNG.fix(’.header, background’) 等。
这些可以简写成 DD_belatedPNG.fix(’#box-one, .header, img,background’); 。
更多选择器的如 DD_belatedPNG.fix(’#box-one, .header,#footer,.box-two a:hover, img,background’); 等等。
http://www.osmn00.com/?p=419


Comments(0)

border三角

.to-top{display:block;overflow:hidden;width:0px;height:0px;border:6px solid #ccc;border-color:#ccc #fff;border-width:0 6px 6px 6px;}

Comments(0)

鼠标划过小图片显示大图片特效

原代码效果：
http://bbs.blueidea.com/viewthread.php?tid=2949537&page=1#pid4706837
看了之后有一处代码并不了明白。于是自己写了自己版本的。效果吗。马马虎虎。浏览器还没发现BUG



我写的JS如下：如有错误，请大家指正：

copycode:
var Stri={
photo:function(Si,Samp){
var si=document.getElementById(Si),samp=si.getElementsByTagName(Samp),len=samp.length,overLayer=null,oself=this;
for(var i=0;i<len;i++){

samp[i].onmouseover=function(){

var path=this.parentNode.href;
var img_box="<img src="+path+">";
var loading_img='<img src="http://www.14pc.com/imageStyle/ajax-loader.gif" class="loading"　alt="正在加载">';
var pageX=oself.getX(this),pageY=oself.getY(this);
if(!overLayer){
overLayer=document.createElement("div");
overLayer.id="overlayer";
document.body.appendChild(overLayer);
}
else{
overLayer.style.display="block";
}
//隐藏层的位置
var w=overLayer.offsetWidth;
var w0=this.offsetWidth;
var h=overLayer.offsetHeight;
var h0=this.offsetHeight;


if((pageX+5+w+w0)>(oself.getCX()+oself.getSX()))
{overLayer.style.left=pageX-(5+w)+"px";}
else{
overLayer.style.left=pageX+5+w0+"px";
}
if((pageY+5+h+h0)>(oself.getCY()+oself.getSY()))
{
overLayer.style.top=pageY-(5+h)+h0+"px";}
else{
overLayer.style.top=pageY+5+"px";}
overLayer.innerHTML=loading_img;
setTimeout(function(){overLayer.innerHTML=img_box},900);
}//onmouseover->>
samp[i].onmouseout=function(){
overLayer.innerHTML="";
overLayer.style.display="none";
}

}},
getX:function(r){
var left=0,box=null;
if(r.getBoundingClientRect){
box=r.getBoundingClientRect();
left=box.left+Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
}
return left;
},
getY:function(r){
var top=0,box=null;
if(r.getBoundingClientRect){
box=r.getBoundingClientRect();
top=box.top+Math.max(document.documentElement.scrollTop,document.body.scrollTop);
}
return top;},

getCX:function(){
return document.documentElement.clientWidth || document.body.clientWidth;},
getSX:function(){
return document.documentElement.scrollLeft ||document.body.scrollLeft;},
getCY:function(){
return document.documentElement.clientHeight || document.body.clientHeight;},
getSY:function(){
return document.documentElement.scrollTop || document.body.scrollTop;}

};

推荐阅读getBoundingClientRect()
Comments(4)

图片轮换

这个切换还好做。只是中间的效果。算法还没明白过来。先保存先。


http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html
Comments(1)

两列(或者说N列)等高的写法

前段时间,有朋友问我怎么做.我没想出来.刚开始用内补丁+外补丁的方法,可是.border却被overflow了..今天说的有两种方面:第一种是JS.第二种是图片背景:
第一种:JS方法


第二种:CSS加背景图片

Comments(0)

page:5/9页上一页 1 2 3 4 5 6 7 8 9 下一页