jquery实现文字向上滚动显示效果的简易方法(个人随笔)
HTML代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>文字向上滚动</title> <link type="text/css" rel="stylesheet" href="style/style.css"/> <script type="text/javascript" src="JavaScript/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="JavaScript/action.js"></script> </head> <body> <div class="content"> <p>俄方确认习大大将参加5月9日红场阅兵</p> <p>李克强卡通形象登政府工作报告图解本</p> <p>福建打下首虎副省长徐钢被调查</p> <p>环保组织起诉山东污染企业索赔3千万</p> <p>美国来华取证起诉中国外逃贪官</p> </div> </body> </html>
CSS代码:
@charset "utf-8"; /* CSS Document */ .content{ width:350px; height:150px; border:1px solid gray; border-radius:20px; color:white; background:green; overflow:hidden; margin:0 auto; text-align:center;} .content p:hover{ cursor:pointer; font-size:18px;}
JS代码:
// JavaScript Document $(function(){ //以下是文字循环向上滚动的代码(鼠标移入停止滚动,鼠标移开继续) function roll(){ $(".content p:first").fadeOut("slow",function(){ $(this).remove().clone(true).appendTo(".content").fadeIn("slow"); }); } var startRoll=setInterval(roll,2000); $(".content").hover(function(){ //鼠标移入停止滚动 clearInterval(startRoll); },function(){ startRoll=setInterval(roll,2000); //鼠标移出继续滚动 }); });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。