html左右循环滚动代码,不间断循环滚动效果的实例代码(必看篇)

html左右循环滚动代码,不间断循环滚动效果的实例代码(必看篇)滚动测试/***@paraobj目标对象如:demo,deml1,demo2中的”demo”可任意,只要不重复**@paraspeed滚动速度越大越慢**@paradirection滚动方向包括:left,right,down,up**@paraobjWidth总可见区域宽度**@paraobjHeight总可见区域高度**@parafilePath存…

大家好,又见面了,我是你们的朋友全栈君。

滚动测试

/**

* @para obj 目标对象 如:demo,deml1,demo2 中的”demo” 可任意,只要不重复

*

* @para speed 滚动速度 越大越慢

*

* @para direction 滚动方向 包括:left,right,down,up

*

* @para objWidth 总可见区域宽度

*

* @para objHeight 总可见区域高度

*

* @para filePath 存放滚动图片的路径 (如果是自动获取文件夹里的图片滚动)

*

* @para contentById 对某id为contentById下的内容进行滚动 此滚动与filePath不能共存请注意

*

* @para 用法实例 scrollObject(“res”,50,”up”,470,200,””,”resource”) 对contentById(resource)下内容进行滚动

*

* @para 用法实例 scrollObject(“res”,50,”up”,470,200,”d:\\images\\”,””) 对filePath(images)下内容自动获取并进行滚动,目前只支持ie

*/

var $ =function(id){return document.getElementById(id)}

// 滚动

function scrollObject(obj,speed,direction,objWidth,objHeight,filePath,contentById)

{

// 执行初始化

if(direction==”up”||direction==”down”)

document.write(UDStructure());

else

document.write(LRStructure());

var demo = $(obj);

var demo1 = $(obj+”1″);

var demo2 = $(obj+”2″);

var speed=speed;

$(contentById).style.display=”none”

demo.style.overflow=”hidden”;

demo.style.width = objWidth+”px”;

demo.style.height = objHeight+”px”;

demo.style.margin =”0 auto”;

if(filePath!=””)

demo1.innerHTML=file();

if(contentById!=””)

demo1.innerHTML=$(contentById).innerHTML;

demo2.innerHTML=demo1.innerHTML;

// 左右滚动

function LRStructure()

{

var _html =””;

_html+=”

“;

_html+=”

_html+=”

“;

_html+=”

“;

// 此处是放要滚动的内容

_html+=”

“;

_html+=”

“;

_html+=”

“;

_html+=”

“;

_html+=”

“;

return _html;

}

// 上下滚动的结构

function UDStructure()

{

var _html =””;

_html+=”

“;

_html+=”

_html+=”

“;

_html+=”

“;

// 此处是放要滚动的内容

_html+=”

“;

_html+=”

“;

_html+=”

“;

_html+=”

“;

_html+=”

“;

_html+=”

“;

_html+=”

“;

return _html;

}

// 取得文件夹下的图片

function file()

{

var tbsource = filePath;//本地文件夹路径

filePath = filePath.toString();

if (filePath==””)

return””;

var imgList =””;

var objFSO =new ActiveXObject(‘Scripting.FileSystemObject’);

// 文件夹是否存在

if(!objFSO.FolderExists(tbsource))

{

alert(“该文件夹路径不存在,或者路径不能含文件名!”);

objFSO =null;

return;

}

var objFolder = objFSO.GetFolder(tbsource);

var colFiles =new Enumerator(objFolder.Files);

var re_inf1 =/\.jpg$/; //验证文件夹文件是否jpg文件

for (;!colFiles.atEnd();colFiles.moveNext()) //读取文件夹下文件

{

var objFile = colFiles.item();

if(re_inf1.test(objFile.Name.toLowerCase()))

{

imgList +=”+filePath+“;

}

}

return imgList;

}

// 向左滚

function left()

{

if(demo2.offsetWidth-demo.scrollLeft<=0)

{

demo.scrollLeft-=demo1.offsetWidth;

}

else

{

demo.scrollLeft++;

}

}

// 向右滚

function right()

{

if(demo.scrollLeft<=0)

{

demo.scrollLeft+=demo2.offsetWidth;

}

else

{

demo.scrollLeft–

}

}

// 向下滚

function down()

{

if(demo1.offsetTop-demo.scrollTop>=0)

{

demo.scrollTop+=demo2.offsetHeight;

}

else

{

demo.scrollTop–

}

}

// 向上滚

function up()

{

if(demo2.offsetTop-demo.scrollTop<=0)

{

demo.scrollTop-=demo1.offsetHeight;

}

else

{

demo.scrollTop++

}

}

// 切换方向

function swichDirection()

{

switch(direction)

{

case”left”:

return left();

break;

case”right”:

return right();

break;

case”up”:

return up();

break;

default:

return down();

}

}

// 重复执行

var myMarquee=setInterval(swichDirection,speed);

// 鼠标悬停

demo.οnmοuseοver=function() {clearInterval(myMarquee);}

// 重新开始滚动

demo.οnmοuseοut=function() { myMarquee=setInterval(swichDirection,speed);}

}

html左右循环滚动代码,不间断循环滚动效果的实例代码(必看篇) html左右循环滚动代码,不间断循环滚动效果的实例代码(必看篇) html左右循环滚动代码,不间断循环滚动效果的实例代码(必看篇) html左右循环滚动代码,不间断循环滚动效果的实例代码(必看篇) html左右循环滚动代码,不间断循环滚动效果的实例代码(必看篇)

scrollObject(“sr”,50,”right”,800,160,””,”img”)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161315.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • ORA-12560: TNS: 协议适配器错误 解决方法[通俗易懂]

    ORA-12560: TNS: 协议适配器错误 解决方法[通俗易懂]前言&nbsp;&nbsp;&nbsp;&nbsp;我在控制台重启oracle服务端监听lsnrctlstart的时候&nbsp;&nbsp;&nbsp;&nbsp;报错:ORA-12560:TNS:协议适配器错误解决方法&nbsp;&nbsp;&nbsp;&nbsp;一:检查监听口是否开启。在开始-运行,输入services.msc或者在控制面板-管理工具,进入服务。找…

  • mybatis和mybatisPlus中解决实体类字段与数据库关键字冲突问题

    mybatis和mybatisPlus中解决实体类字段与数据库关键字冲突问题

  • executescalar mysql_DbCommand.ExecuteScalar 方法的返回值[通俗易懂]

    executescalar mysql_DbCommand.ExecuteScalar 方法的返回值[通俗易懂]DbCommand.ExecuteScalar方法执行查询,并返回查询所返回的结果集中第一行的第一列。所有其他的列和行将被忽略。语法:publicabstractObjectExecuteScalar()返回值:类型:System.Object,结果集中第一行的第一列。备注:使用ExecuteScalar方法从数据库中检索单个值(例如一个聚合值)。与使用ExecuteRe…

  • latex的大括号_大括号和小括号的用法

    latex的大括号_大括号和小括号的用法LaTeX

    2022年10月11日
  • Win10运行PS很卡,分享几种解决Win10用PS卡顿提速设置方法

    Win10运行PS很卡,分享几种解决Win10用PS卡顿提速设置方法转载自品略图书馆http://www.pinlue.com/article/2020/04/0117/3410102560823.html最近升级了Win10系统,安装了PS软件准备工作,但是命使用中发现PS很卡,卡顿问题比较明显,极度的影响使用,那么如何解决呢?下面小编整理了解决方法,相信通过以下的设置之后,PS卡顿问题可以解决。与自定义配置是有很大关系的。特别是一些新功能的加入,在一些低配置电脑上往往会有事倍功半的“奇效”。如果你的PS用起来很卡,不妨赶快检查以下几个选项,可以瞬间提速1..

  • 哈佛幸福课笔记下篇

    哈佛幸福课笔记下篇改变一生的课:哈佛幸福课笔记第1课什么是积极心理学?第2课为什么要学习积极心理学?第3课幸福是一种随机现象吗?第4课积极的环境能改变人第5课环境的力量第6课乐观主义第7课逆境还是机遇?第8课感激第9课积极情绪第10课如何去改变第11课养成良好习惯第12课写日记第13课面对压力第14课过犹不及第15课完美主义第16课享受过程第17课运动与冥想第18课睡眠、触摸和爱情的重要性第19课如何让爱情天长地久第20课幸福与幽默第21课爱情与自尊第22课自尊与自我实现第23课

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号