JavaScript

图片轮换

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


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

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

原代码效果：
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)

两个无聊的效果，在chrome中解释不一样

FF和IE的效果基本上一样。而在chrome里却不一样了。郁闷呀！！
第一个：
我在用日期对象写东西时发现的。
var stri=123456789;
var d=new Date();
var x={
x:function(){
alert((d.getTime()+stri-d.getTime()).toLocaleString());
}
};
x.x();

在IE和FF中可以将数字转换为：123,456,789.00（基本上实现了这个http://bbs.9demo.com/viewthread.php?tid=27&page=1#pid193第三题的转换），但chrome里却没有逗号。
第二个：


差别：在chrome中比较快。
Comments(0)

很无聊的效果

copycode:
function $(id) {
return document.getElementById(id);
}

var mgyp = {
x: function(t) {
var obj = $(t).getElementsByTagName("a"),
len = obj.length,
me = this;
for (var i = 0; i < len; i++) {

obj[i].onclick = function() {
var ss=(me.z(this.parentNode).className!="a" ) ? 0: 1 ;
me.y(t);
if(ss){me.z(this.parentNode).className=="a";}
me.z(this.parentNode).className = (ss) ? "b": "a";
}
}
},
y: function(t) {
var obj1 = $(t).getElementsByTagName("a")
len1=obj1.length;
for (var i = 0; i < len1; i++) {

this.z(obj1[i].parentNode).className = "b";
}
},
z: function(node) {
var s = node.lastChild;
while (s.nodeType != 1) {
s = s.previousSibling;
}
return s;
}
};
mgyp.x("mgyp");


Comments(0)

一个效果中遇到的问题

代码如下:
//无法完美显示,主要问题在鼠标放上而又移开后不能紧接着滚动
copycode:
function $(id) {
return document.getElementById(id);
}
var aa = 0;

var hot_list = {

x: function(t, t1) {
var me = this;
var obj = $(t).getElementsByTagName("ul"),
len = obj.length;
var obj1 = obj[1].getElementsByTagName("li"),
len1 = obj1.length;

for (var i = 0; i < len1; i++) {

obj1[i].i = i;
obj1[i].onmouseover = function() {
clearInterval(timer);
hot_list.z(t, this.i);
}
obj1[i].onmouseout = function() {
timer = setInterval(function() {
hot_list.p("box");
},
1000);
}

}

},
z: function(t, node) {
var obj = $(t).getElementsByTagName("ul"),
len = obj.length;

var obj1 = obj[0].getElementsByTagName("li"),
len1 = obj1.length,
obj2 = obj[1].getElementsByTagName("li");

for (var j = 0; j < len1; j++) {

if (obj1[j].className != "none") {
obj1[j].className = "none";

}
if (j == node) {
obj1[node].className = "act";
}

if (obj2[j].className != "none") {
obj2[j].className = "none";

}
if (j == node) {
obj2[node].className = "act";
}
}
},

p: function(t, aaa) {
var me = this;
var obj = $(t).getElementsByTagName("ul"),
len = obj.length;
var obj1 = obj[1].getElementsByTagName("li"),
len1 = obj1.length;

if (aa < len1) {

hot_list.z(t, aa++);

}
else {
aa = 0;
hot_list.z(t, aa++);
}
}
};

hot_list.x("box");
var timer = setInterval(function() {
hot_list.p("box");
},
1000);




什么问题?
Comments(2)

page:3/3页上一页 1 2 3 下一页