本文通过封装的形式对要滚动的容器进行处理,而且html只需要提供ID就可以了。js会自动进行处理但是容器必须提供宽度以免超出宽度而变形!封装后的JS比较方便
使用方法如下:
var elem = document.getElementById("scroll");
var sc = new Scroll(elem);
var elem2 = document.getElementById("scroll2");
var sc = new Scroll(elem2);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base target="_blank" />
<script type="text/javascript" src="http://ok22.org/download/wufenggundong.js"></script>
<style>
body{ font-size:12px;}
.W130{width:20px;}
#scroll,#scroll2{width:500px; overflow:hidden;border:1px solid #f60;padding:5px 5px;margin-top:10px}
a{color:#666; text-decoration:none;}
</style>
<title>js文字向左移动使用方便scrollLeft</title>
</head>
<body>
<div id="scroll">
<a href="http://www.ok22.org/art_detail.aspx?id=232">C#.net文件批量上传解决方案附下载(sw...</a>
<a href="http://www.ok22.org/art_detail.aspx?id=113">kindeditor/ckeditor编辑器加+图片自动...</a>
<a href="http://www.ok22.org/art_detail.aspx?id=114">js文字上下滚动+左右滚动兼容FF/IE</a>
<a href="http://www.ok22.org/art_detail.aspx?id=118">前端设计js+Tab切换可关闭+添加并自动...</a>
<a href="http://www.ok22.org/art_detail.aspx?id=75">js给C#控件赋值</a>
<a href="http://www.ok22.org/art_detail.aspx?id=134">ckeditor编辑器+finder配置上传功能</a>
<a href="http://www.ok22.org/art_detail.aspx?id=87">iframe里面的页面调用父窗口,左右窗口...</a>
<a href="http://www.ok22.org/art_detail.aspx?id=17">如何引导用户评论(用户检验)</a>
<a href="http://www.ok22.org/art_detail.aspx?id=137">JS读取XML并显示各节点[兼容IE/FF/Chr...</a>
<a href="http://www.ok22.org/art_detail.aspx?id=109">我收藏的教程及工具</a>
</div>
<div id="scroll2">
<a href="http://www.ok22.org/art_detail.aspx?id=232">C#.net文件批量上传解决方案附下载(sw...</a>
<a href="http://www.ok22.org/art_detail.aspx?id=113">kindeditor/ckeditor编辑器加+图片自动...</a>
<a href="http://www.ok22.org/art_detail.aspx?id=114">js文字上下滚动+左右滚动兼容FF/IE</a>
<a href="http://www.ok22.org/art_detail.aspx?id=118">前端设计js+Tab切换可关闭+添加并自动...</a>
<a href="http://www.ok22.org/art_detail.aspx?id=75">js给C#控件赋值</a>
<a href="http://www.ok22.org/art_detail.aspx?id=134">ckeditor编辑器+finder配置上传功能</a>
<a href="http://www.ok22.org/art_detail.aspx?id=87">iframe里面的页面调用父窗口,左右窗口...</a>
<a href="http://www.ok22.org/art_detail.aspx?id=17">如何引导用户评论(用户检验)</a>
<a href="http://www.ok22.org/art_detail.aspx?id=137">JS读取XML并显示各节点[兼容IE/FF/Chr...</a>
<a href="http://www.ok22.org/art_detail.aspx?id=109">我收藏的教程及工具</a>
</div>
<script>
var sc = new Scroll(document.getElementById("scroll"));
var sc = new Scroll(document.getElementById("scroll2"));
</script>
</body>
</html>
大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)