图片上移效果

最新推荐文章于 2024-06-29 16:47:57 发布

小琳琳之编程之路

最新推荐文章于 2024-06-29 16:47:57 发布

阅读量558

点赞数

分类专栏： javascript习题

本文链接：https://blog.csdn.net/guo_rui_lin/article/details/54290832

版权

javascript习题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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.οnlοad=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.οnmοuseοver=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.οnmοuseοut=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>