提示框效果

来源：互联网发布：linux 删除history 编辑：程序博客网时间：2024/06/07 11:50

html5代码：

<!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><link rel="stylesheet" href="d.css"></head><body><div id="outer">    <h2>名车车标展示-鼠标移过显示车标</h2>    <ul>        <li>            <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a>            <img src="img/1.jpg" alt="BMW 宝马汽车" />        </li>        <li>            <a href="javascript:;" title="Alfa Romeo 阿尔法-罗米欧"><strong>Alfa Romeo</strong> 阿尔法-罗米欧</a>            <img src="img/2.jpg" alt="Alfa Romeo 阿尔法-罗米欧" />        </li>        <li>            <a href="javascript:;" title="Skoda 斯柯达"><strong>Skoda</strong> 斯柯达</a>            <img src="img/3.jpg" alt="Skoda 斯柯达" />        </li>        <li>            <a href="javascript:;" title="Volkswagen 大众汽车"><strong>Volkswagen</strong> 大众汽车</a>            <img src="img/4.jpg" alt="Volkswagen 大众汽车" />        </li>        <li>            <a href="javascript:;" title="Saab 萨布牌轿"><strong>Saab</strong> 萨布牌轿车</a>            <img src="img/5.jpg" alt="Saab 萨布牌轿" />        </li>        <li>            <a href="javascript:;" title="Lamborghini 兰博基尼"><strong>Lamborghini</strong> 兰博基尼</a>            <img src="img/6.jpg" alt="Lamborghini 兰博基尼" />        </li>        <li>            <a href="javascript:;" title="Porsche 保时捷"><strong>Porsche</strong> 保时捷</a>            <img src="img/7.jpg" alt="Porsche 保时捷" />        </li>        <li>            <a href="javascript:;" title="Peugeot 标致"><strong>Peugeot</strong> 标致</a>            <img src="img/8.jpg" alt="Peugeot 标致" />        </li>        <li>            <a href="javascript:;" title="Mercedes1 梅赛德斯 奔驰"><strong>Mercedes1</strong> 梅赛德斯 奔驰</a>            <img src="img/9.jpg" alt="Mercedes1 梅赛德斯 奔驰" />        </li>        <li>            <a href="javascript:;" title="Buick 别克汽车"><strong>Buick</strong> 别克汽车</a>            <img src="img/10.jpg" alt="Buick 别克汽车" />        </li>    </ul></div><script src="d.js"></script></body></html>

css3代码：

body,div,ul,li,h2{margin: 0;padding: 0;}body{font: 12px/1.5 Tahoma;}ul{list-style-type: none;}#outer{width: 560px;border: 1px solid #333;margin: 10px auto;padding:0 0 10px 10px;}#outer h2{line-height: 30px;text-align: center;margin-top: 10px;}#outer ul:after{content:"";height: 0;display: block;clear: both;visibility: hidden;}#outer ul{zoom: 1;}#outer ul li{position: relative;float: left;border: 1px solid #333;margin: 10px 10px 0 0;display: inline;}#outer ul li img{position: absolute;top: -14px;left: -14px;display: none;border: 2px solid #999;cursor: pointer;}#outer ul li a{display: block;width: 80px;height: 80px;color: #666;text-decoration: none;background: #f0f0f0;padding: 10px;}#outer ul li a strong{display: block;}.zindex{z-index: 1;}

clear属性是是否要元素浮动；

after选择器，在标签后面加上内容；

z-index表示元素而在z轴的位置

js代码：

var oLi = document.getElementsByTagName("li");var oImg = document.getElementsByTagName("img");var oA = document.getElementsByTagName("a");for(var i=0;i<oLi.length;i++){//oLi[i].index = i;//oLi[i].onmouseover = function (){//for(var j=0;j<oLi.length;j++)//{//oImg[j].style.display="none";//oImg[this.index].style.display="block";//oImg[j].className="";//oImg[this.index].className="zindex";//}//}oA[i].index = oImg[i].index = i;oA[i].onmouseover = function(){oLi[this.index].className="zindex";oImg[this.index].style.display="block"};oA[i].onmouseout = function (){oLi[this.index].className="";oImg[this.index].style.display="none"};oImg[i].onmouseover = function (){oLi[this.index].className="zindex";this.style.display="block"};oImg[i].onmouseout = function(){oLi[this.index].className="";this.style.display="none"}}

我用了2种方法实现；

0 0