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

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=$("#conul");

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:10pxauto;position:relative;border:1px#666
solid;background-color:#FFFFFF;

38

overflow:hidden;}

39

#conul{
position:absolute;margin:10px;top:0;left:0;
padding:0;}

40

#conulli{
width:100%;border-bottom:1px#333333dotted;
padding:20px0;overflow:hidden;}

41

#conullia{
float:left;border:1px#333333solid;
padding:2px;}

42

#conullip{
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

>

57

</

li

>

58

<

li

>
<

a

href

=

"#"

><

img

src

=

"http://tp3.sinaimg.cn/1696357270/50/1282628065/1"

/></

a

>

59

<

p

class

=

"vright"

>第一最好不相见，如此便可不相恋。第二最好不相知，如此便可生死作相思。abc
</

p

>

60

</

li

>

61

</

ul

>

62

</

div

>

63

</

body

>

64

</

html

>