文章详细
js文字向左移动使用方便(scrollLeft)
 2012/8/3 20:39:36 评论:0人 阅读次数:13399

本文通过封装的形式对要滚动的容器进行处理,而且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>
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=401【js文字向左移动使用方便(scrollLeft)】幸凡学习网
0
 
相关文章
推荐文章
Created By Charry-May 3,2010
粤ICP备10093478号-1
顶部