jquery实现新闻列表向上放大滚动聚焦效果代码
代码语言:html
所属分类:加载滚动
代码描述:jquery实现新闻列表向上放大滚动聚焦效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--兼容IE-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻列表向上滚动放大显示动画效果</title>
<style>
a {
color: #333;
}
.news-scroll {
width: 915px;
height: 520px;
margin: 0 auto;
border: 2px solid #aaa;
border-radius: 30px;
}
.news-scroll li {
height: 93px;
line-height: 93px;
}
.news-scroll li e {
width: 190px;
display: inline-block;
text-align: center;
}
.news-scroll li p {
display: inline-block;
}
/*消息滚动*/
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
.roll {
position: relative;
}
.roll li {
width: 100%;
position: absolute;
left: 0;
-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 2s;
font-size: 18px;
list-style: none;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0