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


相关推荐

  • Centos7磁盘阵列部署与修复「建议收藏」

    Centos7磁盘阵列部署与修复「建议收藏」Centos7磁盘阵列部署与修复一、部署RAID10#1、虚拟机添加4块20G的硬盘设备#2、mdadm命令,其中-n4代表使用4块磁盘,-l10代表使用RAID10技术mdadm-Cv/dev/md0-ayes-n4-l10/dev/sdb/dev/sdc/dev/sdd/dev/sde#3、制作好的RAID磁盘阵列格式化为ext4mkfs.ext4/dev/md0#4、创建挂载点,进行磁盘设备挂载mkdir/RAIDmount/dev/md0/RA

    2022年4月27日
    63
  • Idea激活码最新教程2024.2.2版本,永久有效激活码,亲测可用,记得收藏

    Idea激活码最新教程2024.2.2版本,永久有效激活码,亲测可用,记得收藏Idea 激活码教程永久有效 2024 2 2 激活码教程 Windows 版永久激活 持续更新 Idea 激活码 2024 2 2 成功激活

    2025年5月30日
    6
  • java面试葵花宝典[通俗易懂]

    java面试葵花宝典[通俗易懂]15年毕业到现在也近四年了,最近面试了阿里集团(菜鸟网络,蚂蚁金服),网易,滴滴,点我达,最终收到点我达,网易offer,蚂蚁金服二面挂掉,菜鸟网络一个月了还在流程中,最终有幸去了网易。但是要特别感谢点我达的领导及HR,真的非常非常好,很感谢他们一直的关照和指导。回家后,我对这次面试经历,做了总结,希望对想要跳槽的朋友们有个借鉴。面试整体事项1.简历要准备好,联系方式一定要正确清晰醒目,…

    2022年7月8日
    21
  • 好用的vue富文本编辑器记录[通俗易懂]

    好用的vue富文本编辑器记录[通俗易懂]vue-quill-editorhttps://github.com/surmon-china/vue-quill-editorhttps://www.npmjs.com/package/vue-quill-editorhttps://blog.csdn.net/nickroprak/article/details/86645519(自定义图片上传)*默认上传图片为base64编吗…

    2022年10月14日
    5
  • KindEditor编辑器API文档

    KindEditor编辑器API文档一 变量 KE scriptPathki js 的路径 数据类型 StringKE browser 浏览器类型和版本 分别为 KE browser IE KE browser WEBKIT KE browser GECKO KE browser OPERA KE browser VERSION 数据类型 Object 注 3 4 以前版本直接返回字符串 分别为

    2026年3月17日
    2
  • phpMyAdmin安装图解教程

    phpMyAdmin安装图解教程 先下载一份最新版的phpMyAdminMYSQL管理器,点击下载phpMyAdmin解压后得到一个phpMyAdmin的目录(你可以改名)找到/libraries/config.default.php文件(旧版本是根目录下的config.inc.php文件),用写字板(不要用记事本,这是UTF8编码)进行编辑。找到$cfg['PmaAbsoluteUri']

    2022年5月31日
    108

发表回复

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

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