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"/> <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; } .roll li.roll_1 { opacity: 0.5; top: 0; font-size:10px; } .roll li.roll_2 { opacity: 0.8; top: 85px; font-size:14px; } .roll li.roll_3 { background-color: rgba(255, 255, 255, 0.1); opacity: 1; top: 183px; height: 48px; font-size:18px; font-weight: bold; } .roll li.roll_4 { opacity: 0.8; top: 287px; font-size:14px; } .roll li.roll_5 { opacity: 0.5; top: 372px; font-size:10px; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> </head> <body> <div class="news-scroll"> <ul class="roll"> <li class="roll.........完整代码请登录后点击上方下载按钮下载查看
网友评论0