幽灵资源网 Design By www.bzswh.com
本文实例讲述了jquery实现仿新浪微博评论滚动效果。分享给大家供大家参考。具体如下:
这里使用jquery实现评论滚动效果,仿新浪微博大厅文字滚动效果,以前有不少人膜拜的效果,现在被模仿的到处都是啦,呵呵,今天这个仍是模仿的,评论和头像一起向下滚动,最新的一条带渐变淡入淡出,无缝循环向下滚动,觉得不错的就顶下。
点击此处预览效果:
http://demo.jb51.net/js/2015/jquery-sina-scroll-pl-codes/
运行效果如下图所示:
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>漂亮的评论滚动效果,带头像图片一起滚动</title> <style> html,body{font-family:Verdana,sans-serif; font-size:12px;} ul{padding:0;} a:link{text-decoration:none;} .box {padding:30px 0 30px 0;background: #C05732;} .box_content a {color:#E6E5CC;} .box_content {clear:both; overflow:hidden; width:287px; padding:0 0 0 30px;} .r_comments{position:relative; height:262px;} .r_comments ul{list-style:none outside none; margin-left:0px; border-top:1px dashed #a04524;} .r_comments ul li{padding:5px 0px; line-height:20px; border-bottom:1px dashed #8C391C; border-top:1px dashed #D08364;} .r_comments li img{background:#FFF; border:1px solid#999; height:32px; float:left; padding:1px; margin:4px 4px 0 0;} </style> </head> <body> <div class="box"> <div class="box_content r_comments"> <ul style="margin-top: 0px;" id="rcslider"> <li style="opacity: 0.6;"><img alt="公元零零零000" src="/UploadFiles/2021-04-02/0.png">希望本文所述对大家的jquery程序设计有所帮助。
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。