<!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>菜鸟求教 如何把上面这网页效果修改成根据鼠标滑入方向而滑出图片说明的
解决方案 »
- 求正则!
- Help!Help!求一个简单的checkbox js代码
- 【在线等】=======offsetLeft 取到奇怪的值=======
- JAVASCRIPT 怎么在eclipse下调用applet
- 压缩过的js文件如何在恢复
- 选择框导入,导出,十万火急,搞不好要被炒鱿鱼了?
- 知道某个window的名称,如何得到此window的对象句柄?
- 急!!!请问在框架中父框架如想执行子框架的一个javascript程序应该如何编
- 请问如何得到本地端的Temporary Internet Files目录的路径?
- 请教个问题,使用js能否获取打印机的DPI?
- 如何获取GridView1表中的各个input和textarea控件的值
- 在线表单设计器
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.
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");
}
}