您的位置：首页 > 其它

图片上移效果

2017-01-09 17:17 190 查看

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>上移效果</title>
<style type="text/css">

body, ul, li, ol {
list-style: none;
padding: 10px;
margin: 20px;
font-size: 12px;
font-family: 微软雅黑;

}

img {
border: 0px;

}

.picList {
width: 100%;
float: left;

}

.picList .col {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
float: left;
margin: 10px 0 0 10px;

}

.picList .col img, .col a {
position: absolute;
top: 10px;
left: 10px;

}

.picList .col img {
width: 100%;

}

.picList .col a {
display: block;
width: 280px;
height: 180px;
top: 160px;
background:#000;
color: white;
font-style: normal;
line-height: 25px;
padding: 10px;
opacity: 0.8;
text-decoration: none;

}

</style>

<script>
window.onload=function(){
//获取页面元素
var picList=document.getElementById("picList");
// var collist=picList.getElementsByClassName("col");
// console.log(collist.length)
// var one=pics[0].getElementsByTagName("a")[0];
// var second=pics[1].getElementsByTagName("a")[0];

// var third=pics[2].getElementsByTagName("a")[0];
//鼠标移入事件



picList.onmouseover=function(e){

e=e||window.event;

var target=e.target||e.srcElement;

//鼠标移入 a连接图片高度发生变化 //获取事件源top

if(target.tagName.toLowerCase()==="a"){

//获取元素高度



var top=target.offsetTop;

clearInterval(target.time);

//设置定时器

target.time=setInterval(function(){

// clearInterval(target.time);

top-=10;

if(target.offsetTop<=0){

//清除定时器到一定高度是

clearInterval(target.time);

top=0;

}

target.style.top=top+"px";

},20);

}
}



picList.onmouseout=function(e){
e=e||window.event;

var target=e.target||e.srcElement;



//鼠标移入 a连接图片高度发生变化 //获取事件源top



if(target.tagName.toLowerCase()==="a"){

var top=target.offsetTop;

clearInterval(target.time);

target.time=setInterval(function(){

top+=5;

if(top>160){

clearInterval(target.time);



top=160;

}

target.style.top=top+"px"

},20);

}
}



}

</script>

</head>

<body>
<div class='picList' id="picList">
<div class='col' id="pic1" >
<img src="images/b1.jpg" />
<a href='#'>学会html5 <br/>
本课程由浅入深，逐步推进，以示例为主线，详细完整地介绍HTML5的新功能与新特征
</a>
</div>
<div class='col' id="pic2">
<img src="images/b2.jpg" />
<a href='#'>圆角水晶按钮制作<br/>
网页中的圆角按钮和宽度自适应按钮就这么轻松制作！
</a>
</div>
<div class='col' id="pic3">
<img src="images/b3.jpg" />
<a href='#'>导航条菜单的制作<br/>
30分钟教你轻松制作出各种形式的网站导航条菜单
</a>
</div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航