一个网页中显示多个同样的JS特效
我有一个含JS特效的网页，我想将含有JS特效部分拷贝成多个，使其能在一个网页中显示多个相同特效的内容，请问应该怎么修改代码？（本人百度账号仅有15财富值，已全部奉上，请不...
我有一个含JS特效的网页，我想将含有JS特效部分拷贝成多个，使其能在一个网页中显示多个相同特效的内容，请问应该怎么修改代码？（本人百度账号仅有15财富值，已全部奉上，请不要见怪。）
具体的说是：网页中有一个图片，当鼠标指向图片的时候图片向上滑动，鼠标离开图片向下滑，恢复到最初状态，我想把这个特效拷贝，在同一个网页中横向显示多个这样的特效，每一个独立运行。效果如图片所示，
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>滑动提示</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
*{margin:0;padding:0;font-size:12px}
ul,ol{list-style-type:none}
#show{background:white;height:180px;width:180px;position:relative;overflow:hidden;text-align:center}
#show h2{position:absolute;height:360px;text-align:center;line-height:50px;width:100%;opacity:0.5;background:black;color:white;left:0;bottom:0 }
</style>
<script>
function go(){
var t,tt;
var _div=document.getElementById("show");
var obj=_div.getElementsByTagName('h2')[0];
obj.style.bottom="-180px";
var change=function(){
var obj_h=parseInt(obj.style.bottom);
if(obj_h<0){obj.style.bottom=(obj_h+Math.floor((0-obj_h)*0.1))+"px"}//if
else{clearInterval(t)}
}
var back=function(){
var obj_hh=parseInt(obj.style.bottom);
if(obj_hh<0){obj.style.bottom=(obj_hh+Math.floor((-180-obj_hh)*0.1))+"px"}
else{clearInterval(tt)}
}
_div.onmouseover=function(){clearInterval(tt);t=setInterval(change,10);}
_div.onmouseout=function(){clearInterval(t);tt=setInterval(back,10)}
}
window.onload=function(){
go();
}
</script>
</head>
<body>
<div id="show">
<h2><img src='/images/test.jpg' width="180" height="360"/></h2>
</div>
</body>
</html> 展开
具体的说是：网页中有一个图片，当鼠标指向图片的时候图片向上滑动，鼠标离开图片向下滑，恢复到最初状态，我想把这个特效拷贝，在同一个网页中横向显示多个这样的特效，每一个独立运行。效果如图片所示，
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>滑动提示</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
*{margin:0;padding:0;font-size:12px}
ul,ol{list-style-type:none}
#show{background:white;height:180px;width:180px;position:relative;overflow:hidden;text-align:center}
#show h2{position:absolute;height:360px;text-align:center;line-height:50px;width:100%;opacity:0.5;background:black;color:white;left:0;bottom:0 }
</style>
<script>
function go(){
var t,tt;
var _div=document.getElementById("show");
var obj=_div.getElementsByTagName('h2')[0];
obj.style.bottom="-180px";
var change=function(){
var obj_h=parseInt(obj.style.bottom);
if(obj_h<0){obj.style.bottom=(obj_h+Math.floor((0-obj_h)*0.1))+"px"}//if
else{clearInterval(t)}
}
var back=function(){
var obj_hh=parseInt(obj.style.bottom);
if(obj_hh<0){obj.style.bottom=(obj_hh+Math.floor((-180-obj_hh)*0.1))+"px"}
else{clearInterval(tt)}
}
_div.onmouseover=function(){clearInterval(tt);t=setInterval(change,10);}
_div.onmouseout=function(){clearInterval(t);tt=setInterval(back,10)}
}
window.onload=function(){
go();
}
</script>
</head>
<body>
<div id="show">
<h2><img src='/images/test.jpg' width="180" height="360"/></h2>
</div>
</body>
</html> 展开
3个回答
展开全部
<style>
*{margin:0;padding:0;font-size:12px}
ul,ol{list-style-type:none}
/* 改用class选择器 */
.show{background:white;height:180px;width:180px;position:relative;overflow:hidden;text-align:center}
/* 改用class选择器 */
.show h2{position:absolute;height:360px;text-align:center;line-height:50px;width:100%;opacity:0.5;background:black;color:white;left:0;bottom:0 }
</style>
<!-- 用不同的id，添加class="show" -->
<div id="show" class="show">
<h2><img src='/images/test.jpg' width="180" height="360"/></h2>
</div>
<!-- 用不同的id，添加class="show" -->
<div id="show1" class="show">
<h2><img src='/images/test.jpg' width="180" height="360"/></h2>
</div>
<script>
// 接收id
function go(id){
var t,tt;
var _div=document.getElementById(id);// 用id变量查找
var obj=_div.getElementsByTagName('h2')[0];
obj.style.bottom="-180px";
var change=function(){
var obj_h=parseInt(obj.style.bottom);
if(obj_h<0){obj.style.bottom=(obj_h+Math.floor((0-obj_h)*0.1))+"px"}//if
else{clearInterval(t)}
}
var back=function(){
var obj_hh=parseInt(obj.style.bottom);
if(obj_hh<0){obj.style.bottom=(obj_hh+Math.floor((-180-obj_hh)*0.1))+"px"}
else{clearInterval(tt)}
}
_div.onmouseover=function(){clearInterval(tt);t=setInterval(change,10);}
_div.onmouseout=function(){clearInterval(t);tt=setInterval(back,10)}
}
window.onload=function(){
// 每个id调用一次
go("show");
go("show1");
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
