jQuery文字逐行向上滚动代码

最新推荐文章于 2024-06-19 14:56:38 发布

lucky芬

最新推荐文章于 2024-06-19 14:56:38 发布

阅读量3.2k

点赞数

分类专栏：练手小案例

本文链接：https://blog.csdn.net/daimomo000/article/details/77185687

版权

练手小案例专栏收录该内容

42 篇文章 2 订阅

订阅专栏



<!doctype html>
<html>
<head>
<meta charset="utf-8"> 
<title>jQuery文字逐行向上滚动代码</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
*{ margin:0px; padding:0px; font-family:'微软雅黑'; -webkit-tap-highlight-color:rgba(0,0,0,0);  }
li{ list-style:none }
img{ border:none}
a{text-decoration:none;} 
/* -------------------------摇奖排行榜-----------------------------------  */
.Top_Record{}

.record_Top{width:90%; height:50px; text-align:center; line-height:50px; margin:30px auto 0px; color:#000;}
.topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#7C7C7C}
.topRec_List dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#1B96EE;}
.topRec_List dl dd:nth-child(1){ width:17%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(2){ width:18%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(3){ width:25%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(4){ width:40%; height:40px; line-height:40px; }
.maquee{ height:195px;}
.topRec_List ul{ width:100%; height:195px;}
.topRec_List li{ width:100%; height:38px; line-height:38px; text-align:center; font-size:12px; border-bottom: 1px dashed #aaa;}
/*.topRec_List li:nth-child(2n){ background:#077cd0}*/
.topRec_List li div{ float:left;}
.topRec_List li div:nth-child(1){ width:17%;}
.topRec_List li div:nth-child(2){ width:18%;}
.topRec_List li div:nth-child(3){ width:25%;}
.topRec_List li div:nth-child(4){ width:40%;}

.apple a{display:block; text-decoration:none;}

.apple,.aa{ width:90%; height:50px; overflow:hidden; margin:30px auto; border:1px solid #1B96EE;}
.apple a,.aa a{ width:100%; height:50px; line-height:50px; text-indent:20px; color:#1B96EE;}
.aa {word-wrap:break-word;line-height:50px;  color:#1B96EE;}
</style>
</head>
<body>
<div class="Top_Record">
	<div class="record_Top">摇奖排行榜</div>
    <div class="topRec_List">
  		<dl>
        	<dd>编号</dd>
        	<dd>姓名</dd>
        	<dd>奖项</dd>
        	<dd>时间</dd>
        </dl>
        <div class="maquee">
            <ul>
                <li>
                    <div>1</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>2</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>3</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>4</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>5</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>6</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>7</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>8</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
            </ul>
        </div>
    </div>
</div> 

<script type="text/javascript"> 
    function autoScroll(obj){  
		$(obj).find("ul").animate({  
			marginTop : "-39px"  
		},1000,function(){  
			$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
		})  
	}  
	$(function(){ 
		var scroll=setInterval('autoScroll(".maquee")',1500);
         $(".maquee").hover(function(){
            console.log("aaa");
            clearInterval(scroll);
         },function(){
            scroll=setInterval('autoScroll(".maquee")',1500);
         });
	}); 
</script> 
</body>
</html>

lucky芬

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jQuery文字逐行向上滚动代码

jQuery文字逐行向上滚动代码*{ margin:0px; padding:0px; font-family:'微软雅黑'; -webkit-tap-highlight-color:rgba(0,0,0,0); }li{ list-style:none }img{ border:none}a{text-decoration:none;} /* -----------------
复制链接

扫一扫

专栏目录