复制代码 代码如下:
<!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>
<script type="text/javascript"><!--
//主要的滚动函数
//如果滚动的效果正好是需要的效果
//那么你只需要直接调用这个函数即可
var moveTag=function(obj){
var _this = this;
_this.speed = 10;//移动的速度
_this.space = 10 * _this.speed;//移动间隔的时间
obj.scrollLeft=0;//初始化滚动的位置(主要是考虑到需要兼容FF)
var divList = obj.getElementsByTagName("DIV");
var obj2 = new Object();//包含所有滚动列的div
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj){
obj2=divList[i];
break;
}
}
//得到需要滚动的所有列
//divList循环两次的目的是为了不让样式名称影响滚动代码
//也就是尽可能的减少滚动代码与样式名称的耦合
var cellCount = 0;
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2){
cellCount++;
_this.cellList.push(divList[i]);//需要滚动的所有列
}
}
_this.resetCellList=function(){
//这个函数主要是为了让滚动不间断
//在每次滚动到终点的时候需要使用
//将已经滚动过的列移到当前列之后
for(var i=0;i<_this.cellList.length-1;i++){
obj2.removeChild(_this.cellList[i]);
obj2.appendChild(_this.cellList[i]);
}
//重新获取_this.cellList
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]);
}
//alert(_this.cellList.length);
}
_this.resetForMoveRight=function(){
//这个函数主要是为了让滚动不间断
//与resetCellList的区别是这个函数是为了向右不间断滚动使用的
//在每次滚动到起点的时候需要使用
//将当前列之后的所有列移动到当前列之前
if(_this.cellList.length>0){
for(var i=_this.cellList.length-1;i>0;i--){
obj2.removeChild(_this.cellList[i]);
obj2.insertBefore(_this.cellList[i],obj2.childNodes[0]);
}
}
//重新获取_this.cellList
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]);
}
//alert(_this.cellList.length);
}
//alert(_this.cellList.length);
obj2.style.width = parseInt(obj.offsetWidth * cellCount) + "px";
//
//alert(_this.endScroll);
var cellScroll = obj.offsetWidth;//每次滚动需要滚动多少距离
var endScroll = obj2.offsetWidth - cellScroll;//计算滚动条的终点位置
//alert(_this.cellScroll);
//
_this.moveLength = cellScroll;//初始化移动偏量,为0的时候,在页面加载完毕之后将会立即移动;等于_this.cellScroll表示延迟一会再开始执行
_this.scrollEnd = false;
_this.scrollTimes = 0;
//休息一会儿
_this.sleep=function(){
_this.scrollTimes++;
if(_this.scrollTimes>=_this.space){
_this.scrollTimes=0;
_this.moveLength=0;
}
};
_this.moveStart = true;//是否开始移动
_this.isMoveLeft = true;//是否向左移动
_this.move=function(){
obj.onmouseover=function(){
_this.moveStart=false;
};
obj.onmouseout=function(){
_this.moveStart=true;
};
//重新设定cellList
if(obj.scrollLeft>=endScroll && _this.isMoveLeft){//向左移动，并且已经移动到尽头
if(_this.moveLength > 0) _this.moveLength = cellScroll;//调整
if(_this.cellList.length>0){
_this.resetCellList();//更新cellList
obj.scrollLeft=0;
}else{
_this.scrollEnd = true;
}
}else if(obj.scrollLeft<=0 && !_this.isMoveLeft){//向右移动，并且已经移动到尽头
if(_this.moveLength > 0) _this.moveLength = cellScroll;//调整
if(_this.cellList.length>0){
_this.resetForMoveRight();//更新cellList
obj.scrollLeft=endScroll;
}else{
_this.scrollEnd = false;
}
}
//
if(_this.scrollEnd){//向左移动
if(_this.moveLength<cellScroll && _this.moveStart){
obj.scrollLeft--;
_this.moveLength++;
}else if(_this.moveLength>=cellScroll){
_this.sleep();
}
}
else{//向右移动
if(_this.moveLength<cellScroll && _this.moveStart){
obj.scrollLeft++;
_this.moveLength++;
}else if(_this.moveLength>=cellScroll){
_this.sleep();
}
}
};
//自动
_this.start=function(){
setInterval(_this.move,_this.speed);
};
//右移动
_this.moveRight=function(){
_this.scrollEnd = true;//已经滚动到尽头
_this.isMoveLeft = false;//向右滚动
_this.scrollTimes=0;
};
//左移动
_this.moveLeft=function(){
_this.scrollEnd = false;//没有滚动到尽头
_this.isMoveLeft = true;//向左滚动
_this.scrollTimes=0;
};
};
// --></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style><!--
#list{border:#ccc 1px solid;}
#list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;}
#list{width:150px;height:30px;overflow:hidden;}/*必须的属性，宽度、高度可以自定义*/
#list div div{width:150px;height:30px;float:left;}/*必须的属性，宽度、高度最好与#list的定义一样*/
--></style><style mce_bogus="1">#list{border:#ccc 1px solid;}
#list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;}
#list{width:150px;height:30px;overflow:hidden;}/*必须的属性，宽度、高度可以自定义*/
#list div div{width:150px;height:30px;float:left;}/*必须的属性，宽度、高度最好与#list的定义一样*/</style>
<title>无标题文档</title>
</head>
<body>
<div id="list">
<div>
<div>第一列</div>
<div>第二列</div>
<div>第三列</div>
<div>第四列</div>
<div>第五列</div>
</div>
</div>
<a href="javascript:moveLeft()" mce_href="javascript:moveLeft()">左移动</a>
<a href="javascript:moveRight()" mce_href="javascript:moveRight()">右移动</a>
<script type="text/javascript"><!--
var move=new moveTag(document.getElementById("list"));
move.start();
move.speed=10;//滚动的速度,默认为10
//move.space=0;//滚动间隔时间,默认为滚动速度 * 16
//左移动只能移动到最左边，无法一直向左移
//为了使滚动没有间断，所以最左边的坐标是不断变化的
//move.moveLeft();//这样可以设置默认自右向左移动
//move.moveRight();//与move.moveLeft()反方向
var moveLeft=move.moveLeft;
var moveRight=move.moveRight;
//想要一个页面上有N个地方滚动？
//没问题！只需要多new几个实例即可实现
// --></script>
</body>
</html>
<!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>
<script type="text/javascript"><!--
//主要的滚动函数
//如果滚动的效果正好是需要的效果
//那么你只需要直接调用这个函数即可
var moveTag=function(obj){
var _this = this;
_this.speed = 10;//移动的速度
_this.space = 10 * _this.speed;//移动间隔的时间
obj.scrollLeft=0;//初始化滚动的位置(主要是考虑到需要兼容FF)
var divList = obj.getElementsByTagName("DIV");
var obj2 = new Object();//包含所有滚动列的div
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj){
obj2=divList[i];
break;
}
}
//得到需要滚动的所有列
//divList循环两次的目的是为了不让样式名称影响滚动代码
//也就是尽可能的减少滚动代码与样式名称的耦合
var cellCount = 0;
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2){
cellCount++;
_this.cellList.push(divList[i]);//需要滚动的所有列
}
}
_this.resetCellList=function(){
//这个函数主要是为了让滚动不间断
//在每次滚动到终点的时候需要使用
//将已经滚动过的列移到当前列之后
for(var i=0;i<_this.cellList.length-1;i++){
obj2.removeChild(_this.cellList[i]);
obj2.appendChild(_this.cellList[i]);
}
//重新获取_this.cellList
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]);
}
//alert(_this.cellList.length);
}
_this.resetForMoveRight=function(){
//这个函数主要是为了让滚动不间断
//与resetCellList的区别是这个函数是为了向右不间断滚动使用的
//在每次滚动到起点的时候需要使用
//将当前列之后的所有列移动到当前列之前
if(_this.cellList.length>0){
for(var i=_this.cellList.length-1;i>0;i--){
obj2.removeChild(_this.cellList[i]);
obj2.insertBefore(_this.cellList[i],obj2.childNodes[0]);
}
}
//重新获取_this.cellList
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]);
}
//alert(_this.cellList.length);
}
//alert(_this.cellList.length);
obj2.style.width = parseInt(obj.offsetWidth * cellCount) + "px";
//
//alert(_this.endScroll);
var cellScroll = obj.offsetWidth;//每次滚动需要滚动多少距离
var endScroll = obj2.offsetWidth - cellScroll;//计算滚动条的终点位置
//alert(_this.cellScroll);
//
_this.moveLength = cellScroll;//初始化移动偏量,为0的时候,在页面加载完毕之后将会立即移动;等于_this.cellScroll表示延迟一会再开始执行
_this.scrollEnd = false;
_this.scrollTimes = 0;
//休息一会儿
_this.sleep=function(){
_this.scrollTimes++;
if(_this.scrollTimes>=_this.space){
_this.scrollTimes=0;
_this.moveLength=0;
}
};
_this.moveStart = true;//是否开始移动
_this.isMoveLeft = true;//是否向左移动
_this.move=function(){
obj.onmouseover=function(){
_this.moveStart=false;
};
obj.onmouseout=function(){
_this.moveStart=true;
};
//重新设定cellList
if(obj.scrollLeft>=endScroll && _this.isMoveLeft){//向左移动，并且已经移动到尽头
if(_this.moveLength > 0) _this.moveLength = cellScroll;//调整
if(_this.cellList.length>0){
_this.resetCellList();//更新cellList
obj.scrollLeft=0;
}else{
_this.scrollEnd = true;
}
}else if(obj.scrollLeft<=0 && !_this.isMoveLeft){//向右移动，并且已经移动到尽头
if(_this.moveLength > 0) _this.moveLength = cellScroll;//调整
if(_this.cellList.length>0){
_this.resetForMoveRight();//更新cellList
obj.scrollLeft=endScroll;
}else{
_this.scrollEnd = false;
}
}
//
if(_this.scrollEnd){//向左移动
if(_this.moveLength<cellScroll && _this.moveStart){
obj.scrollLeft--;
_this.moveLength++;
}else if(_this.moveLength>=cellScroll){
_this.sleep();
}
}
else{//向右移动
if(_this.moveLength<cellScroll && _this.moveStart){
obj.scrollLeft++;
_this.moveLength++;
}else if(_this.moveLength>=cellScroll){
_this.sleep();
}
}
};
//自动
_this.start=function(){
setInterval(_this.move,_this.speed);
};
//右移动
_this.moveRight=function(){
_this.scrollEnd = true;//已经滚动到尽头
_this.isMoveLeft = false;//向右滚动
_this.scrollTimes=0;
};
//左移动
_this.moveLeft=function(){
_this.scrollEnd = false;//没有滚动到尽头
_this.isMoveLeft = true;//向左滚动
_this.scrollTimes=0;
};
};
// --></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style><!--
#list{border:#ccc 1px solid;}
#list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;}
#list{width:150px;height:30px;overflow:hidden;}/*必须的属性，宽度、高度可以自定义*/
#list div div{width:150px;height:30px;float:left;}/*必须的属性，宽度、高度最好与#list的定义一样*/
--></style><style mce_bogus="1">#list{border:#ccc 1px solid;}
#list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;}
#list{width:150px;height:30px;overflow:hidden;}/*必须的属性，宽度、高度可以自定义*/
#list div div{width:150px;height:30px;float:left;}/*必须的属性，宽度、高度最好与#list的定义一样*/</style>
<title>无标题文档</title>
</head>
<body>
<div id="list">
<div>
<div>第一列</div>
<div>第二列</div>
<div>第三列</div>
<div>第四列</div>
<div>第五列</div>
</div>
</div>
<a href="javascript:moveLeft()" mce_href="javascript:moveLeft()">左移动</a>
<a href="javascript:moveRight()" mce_href="javascript:moveRight()">右移动</a>
<script type="text/javascript"><!--
var move=new moveTag(document.getElementById("list"));
move.start();
move.speed=10;//滚动的速度,默认为10
//move.space=0;//滚动间隔时间,默认为滚动速度 * 16
//左移动只能移动到最左边，无法一直向左移
//为了使滚动没有间断，所以最左边的坐标是不断变化的
//move.moveLeft();//这样可以设置默认自右向左移动
//move.moveRight();//与move.moveLeft()反方向
var moveLeft=move.moveLeft;
var moveRight=move.moveRight;
//想要一个页面上有N个地方滚动？
//没问题！只需要多new几个实例即可实现
// --></script>
</body>
</html>
标签：
文字,不间断,移动
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“javascript:文字不间断向左移动的实例代码”评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。