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)
上一篇 2022年7月18日 上午6:46
下一篇 2022年7月18日 上午6:46


相关推荐

  • scipy安装失败

    scipy安装失败pipinstallscipy安装失败可以从uci网站下载wheel安装包然后执行pipinstallxx.whl进行安装http://www.lfd.uci.edu/~gohlke/pythonlibs/#scipy转载于:https://www.cnblogs.com/timlong/p/6068370.html…

    2025年5月31日
    6
  • 自建iOS分发平台

    自建iOS分发平台随着 2019 年 11 月蒲公英的系统升级之后 iOS 免费分发平台越来越少 越来越不方便 如果不介意上传手持身份证的同学可以接着只有 fir im 单从蒲公英开始限制权限和收费这件事不难看出 免费分发平台似乎走到了尽头 是该考虑自己搭建一个 iOS 分发平台了 如果嫌麻烦的话可以找一下收费的平台也是不错的选择 在文章的最后附带了一些收费的分发平台 有兴趣的同学可以看一下 接下来就讲一下自己搭建 iOS 分发平台

    2026年3月20日
    1
  • JMeter实战(二) 运行原理

    JMeter实战(二) 运行原理

    2020年11月20日
    269
  • java冒泡排序经典代码_Java 8大经典排序算法(含源代码),必须收藏!

    java冒泡排序经典代码_Java 8大经典排序算法(含源代码),必须收藏!原标题:Java8大经典排序算法(含源代码),必须收藏!今天小编帮大家整理了Java的8种经典算法。不论是笔试还是面试,都是非常实用的干货。不论你是菜鸟还是高手,非常值得一看!不转发也是挺可惜的~8种排序之间的关系:1,直接插入排序(1)基本思想:在要排序的一组数中,假设前面(n-1)[n>=2]个数已经是排好顺序的,现在要把第n个数插到前面的有序数中,使得这n个数也是排好顺序的。如此…

    2022年7月9日
    22
  • java根据经纬度计算距离_java根据高德经纬度获取地区

    java根据经纬度计算距离_java根据高德经纬度获取地区前一阵项目中,有一个需求:是查找附近的人,其实就是查询某个距离内有多少用户。实现方式还是比较简单的,首先用户在APP上开启定位权限,将自己的经纬度都存储到数据库,然后以此经纬度为基准,以特定距离为半径,查找此半径内的所有用户。那么,如何java如何计算两个经纬度之间的距离呢?有两种方法,误差都在接受范围之内。1、基于googleMap中的算法得到两经纬度之间的距离,计算精度与谷歌地图的距离精度差不…

    2026年2月21日
    5
  • 最详细的quartz表达式解释

    最详细的quartz表达式解释3 1Cron 表达式包括以下 7 个字段 秒分小时月内日期月周内日期年 可选 3 2 特殊字符 0 4 表示增量值 例如 在秒字段中 5 15 代表从第 5 秒开始 每 15 秒一次 L 只有在月内日期和周内日期字段中可用 表示这个字段不包含具体值 所以 如果指定月内日期 可以在周内日期字段

    2026年3月18日
    2

发表回复

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

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