标签:鼠标移动 title lan item 数组 margin charset initial 不同
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <style type="text/css"> ul, li { list-style: none; margin: 0; padding: 0; } .wrap { width: 600px; margin: 60px auto auto auto; } .wrap-w { width: 100%; height: 486px; border: 1px solid #bfbfbf; overflow-x: hidden; overflow-y: scroll; } .wrap-w ul { width: 100%; } .wrap-w ul>li { padding: 0 10px; box-sizing: border-box; text-align: center; height: 40px; line-height: 40px; } .wrap-w ul>li:last-child { border-bottom: none; } </style> <body> <div class="wrap"> <div class="wrap-w"> <ul class="c_scroll"> <li>我是A</li> <li>我是B</li> <li>我是C</li> <li>我是D</li> <li>我是E</li> <li>我是F</li> <li>我是G</li> <li>我是H</li> <li>我是I</li> <li>我是J</li> <li>我是K</li> <li>我是L</li> <li>我是M</li> <li>我是N</li> <li>我是O</li> <li>我是P</li> <li>我是Q</li> <li>我是R</li> <li>我是S</li> <li>我是T</li> </ul> </div> </div> <div class="wrap"> <div class="wrap-w"> <ul class="c_scroll"> <li>我是A</li> <li>我是B</li> <li>我是C</li> <li>我是D</li> </ul> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script type="text/javascript"> //原理: 定时器 + 元素 margin-top 向上 var _config = { speed: 40, //速度 class: $(‘.c_scroll‘)//绑定的dom } $(document).ready(function() { var _dom = _config.class; //获取绑定的dom _dom.each(function (index, item) { //遍历dom ,防止这个是多个滚动 var _height = $(item).height();//获取每一个滚动区域的高 var a = $(item).html();//获取每一个滚动的里面的html ,用户拼接完成无缝衔接 var fatherHeight = $(item).parent().height();//获取每一个滚动区域父元素的高,滚动区高度不如父元素时,不滚动 $(item).append(a);//将获取滚动区的内容拼接到滚动区,用于无缝衔接 var marginTop = 0;//初始化滚动margin var init =[];//初始化数组,用户创建不同的定时器 if (_height > fatherHeight) {//滚动区高度大于父元素高度,则滚动 init[index]=setInterval(function() { //创建定时器 marginTop = marginTop-1; $(item).css(‘margin-top‘, marginTop); if (Math.abs(marginTop) > _height) { marginTop = 0; } },_config.speed); } $(item).hover( //鼠标移动到滚动区,清除定时器,移出去,则增加 function(){ clearInterval(init[index]); }, function(){ init[index]=setInterval(function() { marginTop = marginTop-1; $(item).css(‘margin-top‘, marginTop); if (Math.abs(marginTop) > _height) { marginTop = 0; } },_config.speed); } ) }) }) </script> </body> </html>
标签:鼠标移动 title lan item 数组 margin charset initial 不同
原文地址:https://www.cnblogs.com/wxhhts/p/12901434.html