要怎么修改才能不只是第一個(gè)有用，其他的都有用
<!DOCTYPE html>
<html>
<head>
?? ?<title></title>
?? ?<meta charset="utf-8"/>
?? ?<style type="text/css">
?? ?*{
?? ??? ?padding: 0;margin: 0;
?? ?}
?? ?#div1{
?? ??? ?border: 1px solid blue;background-color: #8e8e8e;width:500px;height: 500px;margin: 20px auto;text-align: center;overflow: hidden;
?? ?}
?? ?#div1 a{
??? ??? ??? ?float:left;width: 70px;height: 70px;margin:10px auto;border:1px solid pink;background-color: #fff;margin-top: 100px;margin-left:70px; padding-top: 10px;text-decoration: none;position: relative;}
?? ?#div1 a:hover{
?? ??? ?color: red;
?? ?}
?? ?#div1 a p{
?? ??? ?padding-top: 10px;position: absolute;top: 48px; left:10px;
?? ?}
?? ?#div1 a i {position: absolute;top :20px;left :20px;
?? ??? ?text-align: center;filter: alpha(opacity=100);
?? ??? ?opacity: 1;
?? ?}
?? ?#div1 img{
?? ??? ?border:none;
?? ?}
?? ?
?? ?</style>
?? ?<script type="text/javascript">
?? ??? ?window.onload=function(){
?? ??? ?var oDiv=document.getElementById("div1");
?? ??? ?var alist=oDiv.getElementsByTagName("a");
?? ??? ?for (var i =0; i<alist.length; i++) {
?? ??? ???? alist[i].onmouseover=function(){
?? ??? ??? ?var _this=this.getElementsByTagName("i")[0];
?? ??? ??? ?startMove(_this,{top:-25,opacity:0},function(){
?? ??? ??? ??? ?_this.style.top=30+"px";
?? ??? ??? ??? ?startMove(_this,{top:20,opacity:100});
?? ??? ??? ?});
?? ??? ?}
?? ??? ?
?? ??? ?}
?? ?}
?? ?function getStyle(oDiv,attr){
?? ??? ?if (oDiv.currentStyle) {
?? ??? ??? ?return oDiv.currentStyle[attr];
?? ??? ?}
?? ??? ?else{
?? ??? ??? ?return getComputedStyle[attr];
?? ??? ?}
?? ?}
?? ?function startMove(oDiv,json,fn){
?? ??? ?
?? ??? ?clearInterval(oDiv.timer);
?? ??? ?oDiv.timer=setInterval(function(){
?? ??? ??? ?var flag=true;
?? ??? ??? ?for(var attr in json){
?? ??? ??? ??? ?//取得當(dāng)前值
?? ??? ??? ??? ?var icur=0;
?? ??? ??? ??? ?if(attr=="opacity"){
?? ??? ??? ??? ??? ?icur=Math.round(parseFloat(getStyle(oDiv,attr))*100);
?? ??? ??? ??? ?}else {
?? ??? ??? ??? ??? ?icur=parseInt(getStyle(oDiv,attr));
?? ??? ??? ??? ?}
?? ??? ??? ??? ?//計(jì)算速度
?? ??? ??? ??? ?var speed=(json[attr]-icur)/8;
?? ??? ??? ??? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ??? ??? ?if(icur!=json[attr]){
?? ??? ??? ??? ??? ?flag=false;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(attr=="opacity"){
?? ??? ??? ??? ??? ?oDiv.style.filter="alpha(opacity:"+(icur+speed)+")";
?? ??? ??? ??? ??? ?oDiv.style.opacity=(icur+speed)/100;
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?oDiv.style[attr]=icur+speed+"px"
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?if(flag){
?? ??? ??? ??? ??? ?clearInterval(oDiv.timer);
?? ??? ??? ??? ??? ?if(fn){
?? ??? ??? ??? ??? ??? ?fn();
?? ??? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?},30);
?? ?}
?? ?</script>
?? ?
</head>
<body>
<div id="div1">
?? ?<a href="#"><i><img src="images/5.jpg"/></i><p>搜索框</p></a>
?? ?<a href="#"><i><img src="images/5.jpg"/></i><p>搜索框</p></a>
?? ?<a href="#"><i><img src="images/5.jpg"/></i><p>搜索框</p></a>
?? ?<a href="#"><i><img src="images/5.jpg"/></i><p>搜索框</p></a>
?? ?<a href="#"><i><img src="images/5.jpg"/></i><p>搜索框</p></a>
?? ?<a href="#"><i><img src="images/5.jpg"/></i><p>搜索框</p></a>
</div>
</body>
</html>
2017-01-02
<!DOCTYPE html>
<html>
<head>
? ?<title></title>
? ?<meta charset="utf-8"/>
? ?<style type="text/css">
? ? ? ?* {
? ? ? ? ? ?padding: 0;
? ? ? ? ? ?margin: 0;
? ? ? ?}
? ? ? ?#div1 {
? ? ? ? ? ?border: 1px solid blue;
? ? ? ? ? ?background-color: #8e8e8e;
? ? ? ? ? ?width: 500px;
? ? ? ? ? ?height: 500px;
? ? ? ? ? ?margin: 20px auto;
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?overflow: hidden;
? ? ? ?}
? ? ? ?#div1 a {
? ? ? ? ? ?float: left;
? ? ? ? ? ?width: 70px;
? ? ? ? ? ?height: 70px;
? ? ? ? ? ?margin: 10px auto;
? ? ? ? ? ?border: 1px solid pink;
? ? ? ? ? ?background-color: #fff;
? ? ? ? ? ?padding-top: 10px;
? ? ? ? ? ?text-decoration: none;
? ? ? ? ? ?position: relative;
? ? ? ?}
? ? ? ?#div1 a:hover {
? ? ? ? ? ?color: red;
? ? ? ?}
? ? ? ?#div1 a p {
? ? ? ? ? ?padding-top: 10px;
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?top: 48px;
? ? ? ? ? ?left: 10px;
? ? ? ?}
? ? ? ?#div1 a i {
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?top: 20px;
? ? ? ? ? ?left: 20px;
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?filter: alpha(opacity=100);
? ? ? ? ? ?opacity: 1;
? ? ? ?}
? ? ? ?#div1 img {
? ? ? ? ? ?border: none;
? ? ? ?}
? ?</style>
? ?<script type="text/javascript">
? ? ? ?function getStyle(obj, attr) {
? ? ? ? ? ?if (obj.currentStyle) {
? ? ? ? ? ? ? ?return obj.currentStyle[attr]; //ie下獲取屬性
? ? ? ? ? ?} else {
? ? ? ? ? ? ? ?return getComputedStyle(obj, false)[attr]; //chrome,火狐下獲取屬性的寫法,dom標(biāo)準(zhǔn)的全局寫法。特別注意一點(diǎn)：如果要獲取當(dāng)前對(duì)象的顏色信息，IE返回的是16進(jìn)制的'#ffffff'，而FF返回的是rgb(255,255,255)
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?function startMove(obj, json, fn) { ? ? ? ? ?//創(chuàng)建一個(gè)函數(shù)，有三個(gè)參數(shù)。標(biāo)簽，屬性，目標(biāo)值。
? ? ? ? ? ?clearInterval(obj.timer); ? ? ? ? ? ? ? ? ? //第一步，清除定時(shí)器
? ? ? ? ? ?var flag = true;
? ? ? ? ? ?obj.timer = setInterval(function () {//重新寫的定時(shí)器
? ? ? ? ? ? ? ?for (var attr in json) {
? ? ? ? ? ? ? ? ? ?//取當(dāng)前值
? ? ? ? ? ? ? ? ? ?var icur = 0;
? ? ? ? ? ? ? ? ? ?if (attr == 'opacity') {
? ? ? ? ? ? ? ? ? ? ? ?icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //判斷ie瀏覽器下計(jì)算的值。
? ? ? ? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ? ? ? ?icur = parseInt(getStyle(obj, attr)); ? //除ie外計(jì)算的值。
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?//算速度
? ? ? ? ? ? ? ? ? ?var speed = (json[attr] - icur) / 8;
? ? ? ? ? ? ? ? ? ?speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
? ? ? ? ? ? ? ? ? ?//檢測(cè)停止
? ? ? ? ? ? ? ? ? ?if (icur != json[attr]) {
? ? ? ? ? ? ? ? ? ? ? ?flag = false;
? ? ? ? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ? ? ? ?flag = true;
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?if (attr == 'opacity') {
? ? ? ? ? ? ? ? ? ? ? ?obj.style.filter = 'alpha:(opacity)' + icur + speed + ')';
? ? ? ? ? ? ? ? ? ? ? ?obj.style.opacity = (icur + speed) / 100;
? ? ? ? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ? ? ? ?obj.style[attr] = icur + speed + 'px'
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?if (flag) {
? ? ? ? ? ? ? ? ? ?clearInterval(obj.timer);
? ? ? ? ? ? ? ? ? ?if (fn) {
? ? ? ? ? ? ? ? ? ? ? ?fn()
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}, 30)
? ? ? ?}
? ? ? ?window.onload = function () {
? ? ? ? ? ?var oDiv = document.getElementById("div1");
? ? ? ? ? ?var alist = oDiv.getElementsByTagName("a");
? ? ? ? ? ?for (var i = 0; i < alist.length; i++) {
? ? ? ? ? ? ? ?alist[i].onmouseover = function () {
? ? ? ? ? ? ? ? ? ?var _this = this.getElementsByTagName("i")[0];
? ? ? ? ? ? ? ? ? ?startMove(_this, {top: -25, opacity: 0}, function () {
? ? ? ? ? ? ? ? ? ? ? ?_this.style.top = 30 + "px";
? ? ? ? ? ? ? ? ? ? ? ?startMove(_this, {top: 20, opacity: 100});
? ? ? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?};
? ?</script>
</head>
<body>
<div id="div1">
? ?<a href="#"><i><img src="images/food.png"/></i>
? ? ? ?<p>搜索框</p></a>
? ?<a href="#"><i><img src="images/food.png"/></i>
? ? ? ?<p>搜索框</p></a>
? ?<a href="#"><i><img src="images/food.png"/></i>
? ? ? ?<p>搜索框</p></a>
? ?<a href="#"><i><img src="images/food.png"/></i>
? ? ? ?<p>搜索框</p></a>
? ?<a href="#"><i><img src="images/food.png"/></i>
? ? ? ?<p>搜索框</p></a>
? ?<a href="#"><i><img src="images/food.png"/></i>
? ? ? ?<p>搜索框</p></a>
</div>
</body>
這是修改過后你的代碼。請(qǐng)你仔細(xì)查看，再次說明，請(qǐng)仔細(xì)察看。
2016-11-17
不知道啊