一个网页中显示多个同样的JS特效

发布网友 发布时间：2022-04-28 15:39

我来回答

共3个回答

热心网友 时间：2022-04-22 17:05

<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>

热心网友 时间：2022-04-22 18:23

删掉其他相同的

热心网友 时间：2022-04-22 19:58

这个需要修改一下js代码的。