超级简单易学、适合各种の文字滚动滑屏html效果

最新推荐文章于 2022-08-07 10:14:39 发布

Lin y h

最新推荐文章于 2022-08-07 10:14:39 发布

阅读量598

点赞数 1

分类专栏： js html CSS 文章标签： html js css jquery javascript

本文链接：https://blog.csdn.net/LYH4988/article/details/105815791

版权

js 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

超级简单易学的文字滚动滑屏

先上效果图，样式可以自己编写
在这里插入图片描述
上样图

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript"  src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
 $.fn.extend({
            luntopFn: function(o){
                    var time = o.time ? o.time: 30;
                    var ul = o.bd ? $(o.bd) : $(this).find("ul");
                    ul.append(ul.children().clone(true));
                    o.times = null;
                    var len = ul.height()/2;
                    if(!!$(this)[0]){
                        o.times = window.setInterval(function(){
                            var t = ul.css('top');
                            t = t.replace('px','');
                            if(t > -len){
                                t--;
                                ul.css({top: t});
                            }else{
                                ul.css({top: 0});
                            };
                        },time);
                            ul.hover(function(){
                            window.clearInterval(o.times);
                        },function(){
                            o.times = window.setInterval(function(){
                                var t = ul.css('top');
                                t = t.replace('px','');
                                if(t > -len){
                                    t--;
                                    ul.css({top: t});
                                }else{
                                    ul.css({top: 0});
                                };
                            },time);
                        });
                    }
                },
            })   
</script>
<style type="text/css">
.con06CLT{
			text-align: center;
			margin-top: 45px;
			color: #fff;
			line-height: 0px;
			/*overflow: hidden;*/
	    }
.con06CLT h3{
			font-size: 30px;	
			/*line-height: 32px;*/
		}
.con06CLB{
			overflow: hidden;
			padding: 10px 40px 0 45px; height:140px
		}
.con06CL{
			background: url(con06bg.png);
			width: 354px;
			height: 265px;
			margin: 52px 22px 0 0;
		}
.con06CLT p{
			font-size: 23px;
		}
.fl {
			float: left;
		}
.fr {
			float: right;
		}
</style>
</head>
<body>
<div class="con06CL fl">
	<div class="con06CLT">
	     <h3>已参加学习人员列表</h3>
	     <p>（最新加入人数）</p>
	</div>
	<div class="con06CLB" style="overflow: hidden; position: relative; ">
	     <ul style="margin: 0px; padding: 0px; overflow: hidden; position: relative; list-style: none; top: -281px;">
	     	<li style="position: relative; overflow: hidden; ">
	     		<a href="javascript:; " class="fl">祝贺林**</a><span class="fr">131******58 加入学习阵营</span>
	     	</li>
	     	<li style="position: relative; overflow: hidden; ">
	     		<a href="javascript:; " class="fl">祝贺陈**</a><span class="fr">156******63 加入学习阵营</span>
	     	</li>
	     	<li style="position: relative; overflow: hidden; ">
	     		<a href="javascript:; " class="fl">祝贺李**</a><span class="fr">132******45 加入学习阵营</span>
	     	</li>
	     	<li style="position: relative; overflow: hidden; ">
	     		<a href="javascript:; " class="fl">祝贺圆**</a><span class="fr">152******25 加入学习阵营</span>
	     	</li>
	     	<li style="position: relative; overflow: hidden; ">
	     		<a href="javascript:; " class="fl">祝贺宗**</a><span class="fr">138******89 加入学习阵营</span>
	     	</li>
	     	<li style="position: relative; overflow: hidden; ">
	     		<a href="javascript:; " class="fl">祝贺朱**</a><span class="fr">133******46 加入学习阵营</span>
	        </li>
	        <li style="position: relative; overflow: hidden; ">
	        	<a href="javascript:; " class="fl">祝贺王**</a><span class="fr">120******28 加入学习阵营</span>
	        </li>
	        <li style="position: relative; overflow: hidden; ">
	        	<a href="javascript:; " class="fl">祝贺赵**</a><span class="fr">135******37 加入学习阵营</span>
	        </li>
	        <li style="position: relative; overflow: hidden; ">
	        	<a href="javascript:; " class="fl">祝贺黄**</a><span class="fr">155******15 加入学习阵营</span>
	        </li>
	        <li style="position: relative; overflow: hidden; ">
	        	<a href="javascript:; " class="fl">祝贺孙**</a><span class="fr">151******34 加入学习阵营</span>
	        </li>
	        <li style="position: relative; overflow: hidden; ">
	        	<a href="javascript:; " class="fl">祝贺周**</a><span class="fr">131******29 加入学习阵营</span>
	        </li>
	        <li style="position: relative; overflow: hidden; ">
	        	<a href="javascript:; " class="fl">祝贺郑**</a><span class="fr">182******22 加入学习阵营</span>
	        </li>
	        <li style="position: relative; overflow: hidden; ">
	        	<a href="javascript:; " class="fl">祝贺吴**</a><span class="fr">131******57 加入学习阵营</span>
	        </li>
	        <li style="position: relative; overflow: hidden; ">
	        	<a href="javascript:; " class="fl">祝贺林**</a><span class="fr">156******61 加入学习阵营</span>
	        </li>
	        <li style="position: relative; overflow: hidden; ">
	        	<a href="javascript:; " class="fl">祝贺陈**</a><span class="fr">131******33 加入学习阵营</span>
	        </li>
		</ul>
	 </div>
 </div>
 <script type="text/javascript">
	 $(".con06CLB").luntopFn({time: 100});//滑动的速度
</script>
</body>
</html>

欢迎评论区讨论哦@_@!

Lin y h

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
超级简单易学、适合各种の文字滚动滑屏html效果

超级简单易学的文字滚动滑屏先上效果图，样式可以自己编写<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"&g...
复制链接

扫一扫