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; } .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> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0