新闻左右滚动JS实现

自己写的一个列表左右滚动的Demo,各个HTML的元素的样式可以根据自己的需求来更改,下面是代码

<!doctype html> <html> <head> <title>列表左右滚动</title> <meta charset="utf-8"> <style type="text/css"> * { padding: 0px; margin: 0px; color: #000; } .box { width: 600px; height: 30px; line-height:30px; position: relative; overflow: hidden; margin: 80px auto; border: 1px solid #eee; } .roll { position: absolute; left: 0; top: 0; } .roll li { color: #fff; width: 200px; line-height: 30px; height: 30px; float: left; text-align: center; } .roll li a { text-decoration: underline; } </style> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> <div class="box"> <ul class="roll"> <li> <a href="http://www.baidu.com/" target="_blank">前后端分离之Vue(二)前后端结合</a> </li> <li> <a href="http://www.baidu.com/" target="_blank">JQuery插件机制</a> </li> <li> <a href="http://www.baidu.com/" target="_blank">ES6学习系列——Module</a> </li> <li> <a href="http://www.baidu.com/" target="_blank">前后端分离之Vue(二)前后端结合</a> </li> <li> <a href="http://www.baidu.com/" target="_blank">DOM --- Document类型常用的属性和方法</a> </li> <li> <a href="http://www.baidu.com/" target="_blank">Web前端框架学习—Bootstrap</a> </li> </ul> </div> <script type="text/javascript"> (function ($) { $.fn.extend({ cusmerSilder: function (options) { var $ul = $(this).find("ul"); var ul_width = $ul.width(); var box_width = $(this).width(); if (box_width > ul_width) return; init(); ul_width = $ul.width(); var current = 0; var timer = null; $ul.hover(function () { clearInterval(timer); }, function () { timer = setInterval(function () { goLeft(); }, 20); }).trigger("mouseleave"); function init() { var $ul_li = $ul.find("li"); var li_length = $ul_li.length; var li_width = $ul_li.first().width(); $ul.css("width", li_width * li_length * 2); $ul.append($ul.html()); } function goLeft(){ --current; if (current == -(ul_width / 2)) { current = 0; } $ul.css({ left: current }); } } }); })(jQuery) $(function () { $(".box").cusmerSilder(); }); </script> </body> </html>

原文链接:https://blog.csdn.net/a496401006/article/details/82464834?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277607816781818782534%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277607816781818782534&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-30-82464834-null-null.nonecase&utm_term=%E6%96%B0%E9%97%BB

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片

    暂无评论内容