javascript onmouseover问题
麻烦各路高手了，鼠标滑动上方空白让后快速向右或左移动，有些div卡在了，拜托大家帮忙解决了，谢谢<!DOCTYPEhtml><html><head><metahttp-e...
麻烦各路高手了，鼠标滑动上方空白让后快速向右或左移动，有些div卡在了，拜托大家帮忙解决了，谢谢
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择多个div特效</title>
<script type="text/javascript">
function addEvent(obj,type,fn){
if(obj.addEventListener){
return obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
return obj.attachEvent("on"+type,fn);
}
}
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
return obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){
return obj.detachEvent("on"+type,fn);
}
}
function preDef(evt){
var e = evt || window.event;
if(e.preventDefault){
return e.preventDefault();
}else{
return e.returnValue = false;
}
}
window.onload = function(){
var timer;
var timer2;
var odiv = document.getElementById("odiv");
for(var i = 0; i<6; i++){
window["x"+i] = 0;
var od = document.createElement("div");
od.style.float = "left";
od.style.width = "200px";
od.style.height = "200px";
od.id = "cont"+[i]+"";
od.style.borderColor = "#000";
od.style.border ="1px solid"
od.style.backgroundColor = "red";
od.style.opacity = 0;
od.style.marginRight = "10px";
document.body.appendChild(od);
(function(i){
var sumdiv = document.getElementsByTagName("div");
addEvent(sumdiv[i],"mouseover",function(){
timer = setInterval(function(){
window["x"+i]+=5;
window["x"+i]>=100?(window["x"+i]=100):"";
sumdiv[i].style.opacity = window["x"+i]/100;
},30);
});
addEvent(sumdiv[i],"mouseout",function(){
clearInterval(timer);
timer2 = setInterval(function(){
window["x"+i]-=5;
document.title = window["x"+i];
window["x"+i]<=0?(window["x"+i]=0,clearInterval(timer2)):(window["x"+i]-=5);
sumdiv[i].style.opacity = window["x"+i]/100;
},30);
});
})(i);
}
}
</script>
</head>
<body>
</body>
</html> 展开
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择多个div特效</title>
<script type="text/javascript">
function addEvent(obj,type,fn){
if(obj.addEventListener){
return obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
return obj.attachEvent("on"+type,fn);
}
}
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
return obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){
return obj.detachEvent("on"+type,fn);
}
}
function preDef(evt){
var e = evt || window.event;
if(e.preventDefault){
return e.preventDefault();
}else{
return e.returnValue = false;
}
}
window.onload = function(){
var timer;
var timer2;
var odiv = document.getElementById("odiv");
for(var i = 0; i<6; i++){
window["x"+i] = 0;
var od = document.createElement("div");
od.style.float = "left";
od.style.width = "200px";
od.style.height = "200px";
od.id = "cont"+[i]+"";
od.style.borderColor = "#000";
od.style.border ="1px solid"
od.style.backgroundColor = "red";
od.style.opacity = 0;
od.style.marginRight = "10px";
document.body.appendChild(od);
(function(i){
var sumdiv = document.getElementsByTagName("div");
addEvent(sumdiv[i],"mouseover",function(){
timer = setInterval(function(){
window["x"+i]+=5;
window["x"+i]>=100?(window["x"+i]=100):"";
sumdiv[i].style.opacity = window["x"+i]/100;
},30);
});
addEvent(sumdiv[i],"mouseout",function(){
clearInterval(timer);
timer2 = setInterval(function(){
window["x"+i]-=5;
document.title = window["x"+i];
window["x"+i]<=0?(window["x"+i]=0,clearInterval(timer2)):(window["x"+i]-=5);
sumdiv[i].style.opacity = window["x"+i]/100;
},30);
});
})(i);
}
}
</script>
</head>
<body>
</body>
</html> 展开
1个回答
展开全部
<!DOCTYPE HTML>
<html>
<head>
<title>yugi</title>
<meta charset=UTF-8 />
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
jQuery (function ($)
{
var body = $ ("body"), w = 200, h = 200;
for ( var i = 0, len = Math.floor (screen.availWidth / w); i < len; i++)
{
body.append ("<div style='opacity:0;border:1px solid black;float:left;background-color:red;width:"+w+"px;height:"+h+"px;'></div>");
}
body.find ("div").mouseover (function ()
{
$ (this).animate (
{
opacity : 1
}, "slow");
}).mouseout (function ()
{
$ (this).animate (
{
opacity : 0
}, "slow");
});
})
</script>
</head>
<body>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
