<!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>JS+CSS实现给图片加个感应鼠标滑动的文字说明丨芯晴网页特效丨CsrCode.Cn</title>
<style type="text/css" media="all">
.bg{border:#999999 3px solid;width:320px;height:240px;position:relative;overflow:hidden;float:left;margin-right:6px;}
.img{background-image:url(m01.jpg);width:320px;height:240px;}
.txt{width:320px;height:240px;background-color:#000000;position:absolute;top:240px;left:0px;color:#FFCC33;line-height:22px;padding:5px;font-size:12px;}
</style>
<script language="javascript" type="text/javascript">
var div=document.getElementsByTagName("div");
var elem=new Array();    //存储已经初始化的对象
var status=new Array();  //存储对象状态
var interval=10;         //滑动速度
var opacity=69;          //内容图层透明度
//run_animation
var d=function(){
var timer=0,div;
var ypos=100;
this.go_up=function(con,target){timer=setInterval(con.up,interval);div=target;div.style.filter="alpha(opacity="+opacity+")";div.style.opacity=opacity/100;}
this.go_down=function(con){timer=setInterval(con.down,interval)}
this.up=function(){if(ypos<=0){clearInterval(timer);div.style.top="0px";}else{ypos-=10;div.style.top=ypos+"px";}}
this.down=function(){if(ypos>=106){clearInterval(timer);div.style.top="240px";}else{ypos+=10;div.style.top=ypos+"px";}}
this.pause=function(){clearInterval(timer);}
}
//start
var c={
up:function(tar){if(status[tar]==tar){elem[tar].pause();elem[tar].go_up(elem[tar],div[tar]);}else{var n=tar;tar=new d();elem[n]=tar;status[n]=n;tar.go_up(tar,div[n]);}},
pause:function(tar){elem[tar].pause();},
down:function(tar){if(elem[tar]!=undefined){elem[tar].pause();elem[tar].go_down(elem[tar])}}
}
//initial
window.onload=function(){for(var i=0;i<div.length;i+=3){div[i+1].index=div[i+2].index=i+2;div[i+1].onmouseover=function(){c.up(this.index)};div[i+2].onmouseout=function(){c.down(this.index)}}}
</script>
</head>
<body>
<div class="bg">
<div class="img"></div>
<div class="txt">图片:m01.jpg <br />图片名称:红叶传情</div>
</div>
</body>
</html>菜鸟求教  如何把上面这网页效果修改成根据鼠标滑入方向而滑出图片说明的

解决方案 »

  1.   

    要在 d 里面加类似这样的函数:
    this.go_left=function(con,target){timer=setInterval(con.left,interval);div=target;div.style.filter="alpha(opacity="+opacity+")";div.style.opacity=opacity/100;}
    this.left=function(){if(xpos<=0){clearInterval(timer);div.style.left="0px";}else{xpos-=10;div.style.left=xpos+"px";}}
    在 c 中判断鼠标是从哪儿进入的,再把div放到相应的方位上,再调用go_left.
      

  2.   

    我太菜了,还没写好,但是这个片段是片段鼠标从哪里进入的_mousePos: function (e) { //确定鼠标坐标
                        e = e || window.event;
                        var _self = this;
                        _self.mouseX = e.pageX;
                        _self.mouseY = e.pageY;
                    },
                    _divPos: function () { //确定div坐标
                        var _self = this;
                        _self.divLeft = document.getElementById("div").offsetLeft;
                        _self.divTop = document.getElementById("div").offsetTop;
                        _self.divWidth = document.getElementById("div").offsetWidth;
                        _self.divHeight = document.getElementById("div").offsetHeight;
                    },
                    Judge: function (event) { //执行
                        var _self = this;
                        if (_self.overStatus.div1 == 1) {//判断状态
                            _self.overStatus.div1 = 0;
                            _self._mousePos(event);
                            _self._divPos();
                            var y = _self.mouseX - _self.divLeft - _self.divWidth / 2;
                            var x = _self.mouseY - _self.divTop - _self.divHeight / 2;
                            var k = _self.divHeight / _self.divWidth;
                            if ((x > 0 && y < 0 && x / y > -k) || (x < 0 && y < 0 && x / y < k)) {//从左进入
                                _self.move("left");
                                _self.go("left");
                            }
                            if ((x > 0 && y > 0 && x / y < k) || (x < 0 && y > 0 && x / y > -k)) {//从右进入
                                _self.move("right");
                                _self.go("right");
                            }
                            if ((x < 0 && y > 0 && x / y < -k) || (x < 0 && y < 0 && x / y > k)) {//从上进入
                                _self.move("top");
                                _self.go("top");
                            }
                            if ((x > 0 && y > 0 && x / y > k) || (x > 0 && y < 0 && x / y < -k)) {//从下进入
                                _self.move("bottom");
                                _self.go("bottom");
                            }
                        }