原生JS实现循环滚动，鼠标移动暂停

最新推荐文章于 2023-09-22 11:22:39 发布

Coca可口

最新推荐文章于 2023-09-22 11:22:39 发布

阅读量599

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_43820434/article/details/132347154

版权

本文介绍了如何利用HTML、CSS和jQuery创建一个动态的滚动内容区域，通过设置position属性和关键帧动画，实现当鼠标悬停时暂停滚动的效果。

摘要由CSDN通过智能技术生成

<html>
<body>
  <div class="content-head" id="contend_head">
	<div id="content">
    //填写滚动内容
    </div>							                    
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</html>
<style>
#contend_head{
  position: absolute;
  height: 500px;
  width: 200px;
  overflow: hidden;//必填，隐藏多余部分
}
#content {
  position: relative;//外层设置absolute，内层设置relative，则会以外层为参照定义自己位置
  top: 0;
  animation: scroll 25s linear infinite;//设置滚动总共花费时间
}
    
#content:hover {
  animation-play-state: paused;//鼠标移过去就暂停滚动，松开继续滚动
}

@keyframes scroll {
  0% { top: 0%; }//由下往上滚动，则初始就填0
  100% { top: -365%; }//填content里面高度绝对值的负数
}
  </style>