|
<!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>
|
|
<title>中国站长天空-网页特效-综合特效-仿新浪微博“大家正在说”渐入轮显滚动效果</title>
|
|
<meta http-equiv="content-type" content="text/html;charset=gb2312">
|
|
<!--把下面代码加到<head>与</head>之间--> |
|
<style type="text/css">
|
|
*{margin:0;padding:0;} |
|
ul,li{list-style-type:none;} |
|
body{font-size:13px;background-color:#999999;} |
|
#con{width:700px;height:400px;margin:10px auto;position:relative;border:1px #666 solid;background-color:#FFFFFF;overflow:hidden;} |
|
#con ul{position:absolute;margin:10px;top:0;left:0;padding:0;} |
|
#con ul li{width:100%;border-bottom:1px #333333 dotted;padding:20px 0;overflow:hidden;} |
|
#con ul li a{float:left;border:1px #333333 solid;padding:2px;} |
|
#con ul li p{margin-left:68px;line-height:1.5;padding:10px;} |
|
</style>
|
|
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/jquery.js"></script>
|
|
<script language="javascript">
|
|
$(function(){ |
|
var scrtime; |
|
$("#con").hover(function(){ |
|
clearInterval(scrtime); |
|
},function(){ |
|
scrtime = setInterval(function(){ |
|
var $ul = $("#con ul"); |
|
var liHeight = $ul.find("li:last").height(); |
|
$ul.animate({marginTop : liHeight+40 +"px"},1000,function(){ |
|
$ul.find("li:last").prependTo($ul) |
|
$ul.find("li:first").hide(); |
|
$ul.css({marginTop:0}); |
|
$ul.find("li:first").fadeIn(1000); |
|
}); |
|
},3000); |
|
}).trigger("mouseleave"); |
|
}); |
|
</script>
|
|
</head>
|
|
<body>
|
|
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。 |
|
<!--把下面代码加到<body>与</body>之间--> |
|
<div id="con">
|
|
<ul>
|
|
<li>
|
|
<a href="http://frieboy168.blog.163.com/blog/#"><img src="http://www.zzsky.cn/effect/images/201011142300.jpg"></a>
|
|
<p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。作相思。</p>
|
|
</li>
|
|
<li>
|
|
<a href="http://frieboy168.blog.163.com/blog/#"><img src="http://www.zzsky.cn/effect/images/201011142300.jpg"></a>
|
|
<p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
|
|
</li>
|
|
<li>
|
|
<a href="http://frieboy168.blog.163.com/blog/#"><img src="http://www.zzsky.cn/effect/images/201011142300.jpg"></a>
|
|
<p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
|
|
</li>
|
|
<li>
|
|
<a href="http://frieboy168.blog.163.com/blog/#"><img src="http://www.zzsky.cn/effect/images/201011142300.jpg"></a>
|
|
<p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html> |
相关推荐
主要介绍了JS+CSS实现仿新浪微博搜索框的方法,实例分析了javascript针对搜索框样式的控制技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery完美仿新浪微博大厅无缝滚动效果 v2.0 新版 注意:请使用最新的jquery包,否则可能在非IE浏览器下出现显示BUG,最新版可到Jquery官网 www.jquery.com下载,由于jQuery本身动画无法暂停,故采用第三方重写动画...
CSS3新浪微博模板商店图片抖动特效.zip
jQuery仿新浪微博@功能特效.zip
jQuery仿新浪微博高度自适应滚动代码.zip
表情功能的实现虽说不难,但却比较繁琐,首先要了解新浪微博开放平台的表情API,然后通过某种方式调用,如果通过网页后台代码直接读取储存到JavaScript变量中,又会拖慢网页加载速度,如果采用AJAX读取,又要解决...
对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步...
用Javascript+css+html写的一个新浪微博登陆界面,供js初学者学习,参考
本文实例为大家分享了JS新浪微博分享功能,供大家参考,具体内容如下 <!DOCTYPE html> <html xmlns:wb=http://open.weibo.com/wb> <head> <meta charset=utf-8> <title>javaScript...
纯js实现的类似新浪微博那种,逐条加载显示的效果。 html是简单的一个div ul li 格式 使用方法简单: 1、在网页head中引入lanrenzhijia.css样式 2、将html复制到你需要的地方并修改,直至符合你的需求 3、将...
电影搜索引擎,基于lucene的电影搜索引擎,主要数据来源为百度新闻,豆瓣电影,百度百科,新浪微博 本文研究的主要内容是:面向电影搜索引擎的功能设计和技术实现。搜索引擎功能设计主要包括,信息资源的集成,查询...
我们先来看下效果图 CSS * { padding: 0; margin: 0; } li { list-style: none; } body { background: #eee; } #t_sina { width: 390px; padding: 10px; background: #fff; margin: 50px auto 0; font-size: 12px;...
sturts2微博系统,实现发心情功能,采用struts2+mysql+css+struts2标签+javascript技术,大三的struts2课程设计,附带源代码,mysql备份文件,课程设计报告。初学者和开发者都可以拿来参考和借鉴,不坑。
jQuery新浪微博用户评论表单代码.zip
从需求上来说,这个功能需要实时调用最新的微博数据,单就前端开发来说,其需求可以拆分如下: 1 内容持续滚动; 2 新微博将下面的微博先推下去,然后淡入进来; 3 鼠标经过内容暂停滚动; 4 容器底部渐变消失在背景...
可根据设定的团购价格,自动计算折扣功能,支持新浪微博、QQ、支付宝、 淘堡快捷登陆。购物流程一目了然,其他页面新增多种jquery兼容特效, 整站采用 Div+Css布局,兼容良好,模板前端代码优化并重构,速度提升50%!...
仿新浪登录时密码框的默认文字提示,通过css+js+div控制,默认页面密码框提示“请输入密码”,点击文本框,提示信息消失,要是用户输入为空,则继续提示“请输入密码”,要是用户输入不为空,显示为黑圆点。
这个效果主要是模拟新浪微博一个年度财报H5页面中的loading加载效果 由于本案例图片比较小,真正加载效果很快,所以用简单的js做了一个控制 主要展示的是加载的过程,喜欢的懒人可以模仿试试 主要传播的是一...