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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • linux 放开8080端口命令_linux开放端口命令

    linux 放开8080端口命令_linux开放端口命令1.centos7版本对防火墙进行加强,不再使用原来的iptables,启用firewall1.查看已开放的端口(默认不开放任何端口)firewall-cmd–list-ports2.开启80端口firewall-cmd–zone=public(作用域)–add-port=80/tcp(端口和访问类型)–permanent(永久生效)firewall-cmd–zone=pub…

    2025年9月25日
    7
  • java volatile 关键字详解「建议收藏」

    java volatile 关键字详解「建议收藏」javavolatile关键字详解一,什么是volatile关键字,作用是什么​volatile是java虚拟机提供的轻量级同步机制​作用是:1.保证可见性2.禁止指令重排3.不保证原子性本篇具体就讲解什么叫保证了可见性,什么叫禁止指令重排,什么是原子性而在这之前需要对JMM有所了解二,什么是JMM​JMM(java内存模型JavaMemoryModel简称JMM)本身是一个抽象的概念,并不在内存中真实存在的,它描述的

    2022年7月18日
    14
  • leetcode链表问题_链表面试题

    leetcode链表问题_链表面试题给你单链表的头指针 head 和两个整数 left 和 right ,其中 left <= right 。请你反转从位置 left 到位置 right 的链表节点,返回 反转后的链表 。示例 1:输入:head = [1,2,3,4,5], left = 2, right = 4输出:[1,4,3,2,5]示例 2:输入:head = [5], left = 1, right = 1输出:[5] 提示:链表中节点数目为 n1 <= n <= 500-500

    2022年8月9日
    5
  • OV7725的帧率和PCLK寄存器设置[通俗易懂]

    OV7725的帧率和PCLK寄存器设置[通俗易懂]一、OV7725的PCLK的改变和以下几个寄存器有关:    1:OX0D;2:0X11—————————————————————————————————————————————————

    2022年9月23日
    4
  • 万字图解Java多线程

    万字图解Java多线程前言java多线程我个人觉得是javaSe中最难的一部分,我以前也是感觉学会了,但是真正有多线程的需求却不知道怎么下手,实际上还是对多线程这块知识了解不深刻,不知道多线程api的应用场景,不知道多线程的运行流程等等,本篇文章将使用实例+图解+源码的方式来解析java多线程。文章篇幅较长,大家也可以有选择的看具体章节,建议多线程的代码全部手敲,永远不要相信你看到的结论,自己编码后运行出来的,才是自己的。什么是java多线程?进程与线程进程当一个程序被运行,就开启了一个进程,比如启动了qq,w.

    2022年6月6日
    37
  • 软件测试常用的黑盒测试方法有哪些,简述什么是黑盒测试方法(最常用的黑盒测试方法)…[通俗易懂]

    软件测试常用的黑盒测试方法有哪些,简述什么是黑盒测试方法(最常用的黑盒测试方法)…[通俗易懂]黑盒(又叫功能测试、数据驱动测试):1.黑盒测试发现错误类型:功能错误和遗漏界面错误数据库错误性能错误初始化和终止错误2.黑盒测试:程序外部接口进行的3.黑盒测试就是根据功能需求来设计测试用例,验证软件是否按照预期要求工作。4.黑盒测试技术主要有等价类划分法、边界值法、判定表法、因果图法、场景法等。5.等价类划分法测试技术是依据软件系统输入集合、输出集合或操作集合实现功能的相同性为依据,对其进行的…

    2022年9月27日
    3

发表回复

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

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