模拟新浪微博首页滚动效果

最新推荐文章于 2021-06-01 08:18:23 发布

zhizunbao_nie

最新推荐文章于 2021-06-01 08:18:23 发布

阅读量507

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/nzf_001/article/details/28866039

js 专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

`02`	`<html` `xmlns="http://www.w3.org/1999/xhtml">`

03 <head>

`04`	`<script` `type="text/javascript"` `src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>`

`05`	`<meta` `http-equiv="Content-Type"` `content="text/html; charset=utf-8"` `/>`

`06`	`<title>无标题文档</title>`

`07`	`<script` `language="javascript">`

`08`	`$(function(){`

`09`	`var scrtime;`

`10`	`$("#con").hover(function(){`

`11`	`clearInterval(scrtime);`

12

`13`	`},function(){`

14

`15`	`scrtime = setInterval(function(){`

`16`	`var $ul = $("#con ul");`

`17`	`var liHeight = $ul.find("li:last").height();`

`18`	`$ul.animate({marginTop : liHeight+40 +"px"},1000,function(){`

19

`20`	`$ul.find("li:last").prependTo($ul)`

`21`	`$ul.find("li:first").hide();`

`22`	`$ul.css({marginTop:0});`

`23`	`$ul.find("li:first").fadeIn(1000);`

24 });

`25`	`},3000);`

26

`27`	`}).trigger("mouseleave");`

28

29

30 });

`31`	`</script>`

`32`	`<style` `type="text/css">`

33 <!--

`34`	`*{ margin:0; padding:0;}`

`35`	`ul,li{ list-style-type:none;}`

`36`	`body{ font-size:13px; background-color:#999999;}`

`37`	`#con{ width:700px; height:400px; margin:10px auto; position:relative; border:1px #666 solid; background-color:#FFFFFF;`

`38`	`overflow:hidden;}`

`39`	`#con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;}`

`40`	`#con ul li{ width:100%; border-bottom:1px #333333 dotted; padding:20px 0; overflow:hidden; }`

`41`	`#con ul li a{ float:left; border:1px #333333 solid; padding:2px;}`

`42`	`#con ul li p{ margin-left:68px;line-height:1.5; padding:10px;}`

43 -->

`44`	`</style>`

45 <body>

`46`	`<div` `id="con">`

47 <ul>

`48`	`<li> <a` `href="#"><img` `src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1"` `/></a>`

`49`	`<p` `class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相</p>`

50 </li>

`51`	`<li> <a` `href="#"><img` `src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1"` `/></a>`

`52`	`<p` `class="vright">第一最好不相见，如此便可不相恋。第二`

53 </p>

54 </li>

`55`	`<li> <a` `href="#"><img` `src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1"` `/></a>`

`56`	`<p` `class="vright">第一最好不相见，教科书所说教科书所说的思想道德教育在现今社会一点也体现不出，先进的特色社会主义啊，你何时才能拯救现今社会啊的思想教科书所说的思想道德教育在现今社会一点也体现不出，先进的特色社会主义啊，你何时 </p>`