css、js实现无缝滚动--不支持ie

最新推荐文章于 2023-11-13 20:25:54 发布

wangsaisoon

最新推荐文章于 2023-11-13 20:25:54 发布

阅读量361

点赞数

分类专栏： html+css+js/jquery 文章标签：无缝滚动

本文链接：https://blog.csdn.net/baidu_35468322/article/details/85335591

版权

html+css+js/jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

示例：链接：https://pan.baidu.com/s/1VA_7a9Xbxz4JUeM8p42mIg 提取码：6wh3

index.html

<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>无缝滚动</title>
	<link rel="stylesheet" type="text/css" href="css/myCss.css" />
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/myJs.js"></script>
</head>
<body>
	<h3>Java学习之路（书籍推荐）</h3>
	<div class="hlhjy_content">
		<div class="hlhjy_content_div">
			<ul class="cc rowup">
				<br>
				<li>1《Thinking in java》(阅读2遍)，入门第一位是建立正确的概念</li>
				<li>2《Core Java》这本书更贴近实践，更多API的介绍，同样，更新也更频繁。(可以选重点章节读一下)</li>
				<li>3《Effective Java》(阅读1遍)，在熟悉语法、API之后，你需要知道最佳实践和陷阱，没有比这本更好的。</li>
				<li>4《深入Java虚拟机》(阅读2遍)，翻译一般，但不可不读，最好结合最新的JVM规范来读。</li>
				<li>5《Java Puzzlers》，通过谜题介绍一些你可能没有注意到的边角料，作为趣味读物也不错</li>
				<li>6《Java Concurrency in Practic》(阅读1遍)，并发领域必读经典。</li>
				<li>7《Java并发编程：设计原则与模式》，同样是Doug lea的作品。</li>
				<li>8《java threads》，入门读物。</li>
				<li>9《多处理器编程的艺术》(阅读1遍)</li>
				<li>10《算法概论》</li>
				<li>11《分析模式——可复用对象模型》</li>
				<li>-----------华丽分割线-----------</li>
				<!-- 内容可以更多哦 -->
			</ul>
		</div>
	</div>
</body>
</html>

myJs.js


$(function(){
    // 复制一份内容
    $(".hlhjy_content_div ul").append($(".hlhjy_content_div ul").html());
    var height = $('.hlhjy_content ul').height(); // 一份数据的高度
    // 设置滚动的高度，如果有一点小小的跳动，可以修改这个数字微调
    addKeyFrames('-' + (height/2 + 16) + 'px' ); // 设置keyframes
    $('.hlhjy_content .cc').addClass(' rowup'); // 添加 rowup
    // 调整滚动速度，数字越大，滚动越快
    $('.hlhjy_content .rowup').css("animation", (height/200) + "s rowup linear infinite normal");

	// 鼠标放上，停止滚动
    $(".hlhjy_content_div").mouseenter(function(ev) {
	    $(this).find("ul").removeClass("hlhjy_running").addClass("hlhjy_paused");
    });

    // 鼠标移开，继续滚动
    $(".hlhjy_content_div").mouseleave(function(ev) {
	    $(this).find("ul").removeClass("hlhjy_paused").addClass("hlhjy_running");
    });
});


// 设置keyframes属性
function addKeyFrames(y){
    var style = document.createElement('style');
    style.type = 'text/css';
    var keyFrames = '\
    @-webkit-keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }\
    @keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }';
    style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
    document.getElementsByTagName('head')[0].appendChild(style);
}

myCss.css

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -677px, 0);
        transform: translate3d(0, -677px, 0);
        display: none;
    }
}

.hlhjy_content {
    border: 1px solid #e5e5e5;
    padding: 56px 34px 70px 30px;
    height: 620px;
    width: 300px;
    overflow: hidden;
    margin: auto;
    margin-top: 45px;
    background: #dda;
}

.hlhjy_content ul li {
    padding-left: 15px;
    line-height: 28px;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 34px;
}

.hlhjy_content>div{
	width: 100%;
    height: 100%;	
    position: relative;
    overflow: hidden;
    margin: auto;
}

.hlhjy_content .rowup{
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    position: relative;
}

.hlhjy_running {
	animation-play-state: running !important;
	-webkit-animation-play-state: running !important; /* Safari 和 Chrome */
}

.hlhjy_paused {
    animation-play-state: paused !important;
    -webkit-animation-play-state: paused !important; /* Safari 和 Chrome */
}

wangsaisoon

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css、js实现无缝滚动--不支持ie

示例：链接：https://pan.baidu.com/s/1VA_7a9Xbxz4JUeM8p42mIg 提取码：6wh3index.html &lt;html&gt;&lt;head&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;meta http-equiv="cont...
复制链接

扫一扫