图片滑动提示效果-JS特效-爱易网页

图片滑动提示效果

日期：2014-05-18　浏览次数：20259 次

以下是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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片</title>
</head>
<style>
#list{
 width:400px;
 height:400px;
 border:1px solid #333;
 padding:5px;
}
#list ul
{
 list-style:none;
 float:left;
}
#list li{
 margin:5px;
}
#list img
{
 width:100px;
 vertical-align:middle; 
 border:0;
}
#list div.box
{
 width:100px;
 height:150px;
 line-height:150px;
 border:1px solid #333; 
 display: table-cell;
 vertical-align:middle;
 text-align:center;
 display: block;
 font-size: 130px;
 position:relative;
 overflow:hidden;
}
#list div.tip
{
 height:25px;
 line-height:25px;
 text-align:center;
 width:100px; 
 background:#333; 
 position:absolute;
 z-index:10;
 top:100px;
 font-size:14px;
 filter:alpha(opacity=40);
 -moz-opacity:0.4;
}
</style>
<body>
<div id="list" name="list">
<ul>
 <li><div class="box"><img src="http://bbs.<font face=Verdana>logo.jpg</font>" alt="test1" /></div></li>
 <li><div class="box"><img src="http://bbs.<font face=Verdana>logo.jpg</font>" alt="test2" /></div></li>
</ul>
<ul>
 <li><div class="box"><img src="http://bbs.<font face=Verdana>logo.jpg</font>" alt="test3" /></div></li>
 <li><div class="box"><img src="http://bbs.<font face=Verdana>logo.jpg</font>" alt="test4" /></div></li>
</ul>
</div>
<script language="javascript">
 var list = document.getElementById("list");
   var divs = list.getElementsByTagName("div");
 var t;
   for (var i = 0; i < divs.length; i++) {
           divs[i].onmouseover = function (e) {
   var tip = document.createElement("div");
   var img = this.getElementsByTagName("img");
   tip.innerHTML = img[0].getAttribute("alt");
   var event = event||window.event;
   tip.setAttribute("class", "tip");
   tip.setAttribute("className", "tip");
   tip.style.left = "-100px";
   this.appendChild(tip);
   t = setInterval(function(){showtip(tip);},10);
 
           }
           divs[i].onmouseout = function (e) {
   clearInterval(t);
   var tip = this.lastChild;
   if (tip.tagName == "DIV"){ 
    this.removeChild(tip);   
   }
           }
 }
 function showtip(obj)
 {
  var left = gs(obj, "left");
  var value = left+10;
  if (value <= 0){
   obj.style.left = value+"px";
  }
  else
   clearInterval(t);
 }
 function gs(obj, a){
  if (obj.currentStyle){ 
       var curVal=obj.currentStyle[a]
    }
  else{ 
       var curVal=document.defaultView.getComputedStyle(obj, null)[a]
    } 
    return parseInt(curVal);
 }
</script>
</body>
</html></font>

<a href="http://js.aiyiweb.com/">欢迎访问爱易网网页特效代码站，js.aiyiweb.com</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

图片滑动提示效果

相关资料更多>

推荐阅读更多>