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”)

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • System.setProperty用法

    System.setProperty用法setProperty(Stringprop,Stringvalue)—–设定健值对到系统内存中(操作系统变量的方法)。首先我们来了解一下参数:prop-系统属性的名称。value-系统属性的值正确的返回值情况:系统没有查到健值,返回null,查到的话返回value值。抛错情况:SecurityException-如果安全管理器存在并且其checkPermission方法不允许设置指定属性。NullPointerException-如果key或v.

    2022年7月12日
    58
  • MATLAB2016b安装包

    MATLAB2016b安装包百度云盘链接:(https://pan.baidu.com/s/17NdGN-GviFWlUfMrTZA_Kw)密码:p4ue

    2022年5月29日
    40
  • docker下载安装教程_docker镜像存储位置

    docker下载安装教程_docker镜像存储位置前言Docker提供轻量的虚拟化,你能够从Docker获得一个额外抽象层,你能够在单台机器上运行多个Docker微容器,而每个微容器里都有一个微服务或独立应用,例如你可以将Tomcat运行在一个D

    2022年7月30日
    11
  • pycharm中mysql连接失败_pycharm连接mysql数据库连接不上[通俗易懂]

    pycharm中mysql连接失败_pycharm连接mysql数据库连接不上[通俗易懂]代码其实很简单,只有一小段,是在pycharm上运行的,所用的python版本为2.7,mysql版本为5.7.21#-*-coding:UTF-8-*-importreimportMySQLdbif__name__==’__main__’:#打开数据库conn=MySQLdb.connect(host=’localhost’,port=3306,user=’root’,pa…

    2025年6月21日
    2
  • 世界各个地区WIFI 2.4G及5G信道划分表(附无线通信频率分配表)

    目前主流的无线WIFI网络设备802.11a/b/g/n/ac:传统802.111997年发布两个原始数据率:1Mbps和2Mbps跳频展频(FHSS)或直接序列展布频谱(DSSS)三个不重叠的信道中,工业、科学、医学(ISM)频段频率为2.4GHz最初定义的载波侦听多点接入/避免冲撞(CSMA-CA)802.11a1999年发布提供多种调制类型的数据传输率:6、9、12、18、24…

    2022年4月5日
    526
  • 华为交换机配置不同vlan不同网段互通[通俗易懂]

    华为交换机配置不同vlan不同网段互通[通俗易懂]在一台交换机中实现不同vlan不同网段相互通信Pc1:Pc2:Sw1:<Huawei>system-view1、创建vlan[Huawei]vlan2[Huawei-vlan2]quit[Huawei]vlan3[Huawei-vlan3]quit2、进入接口配置[Huawei]interfaceGigabitEthernet0/0/1[Huaw…

    2025年9月7日
    12

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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