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


相关推荐

  • Easyui Datagrid的Rownumber行号显示问题

    Easyui Datagrid的Rownumber行号显示问题在Oracle中使用orderby进行查询排序时,如果排序字段中有空值(null),排序结果可能会达不到我们想要的结果。如:select*fromtestorderbyagedesc;按照age字段降序排序,结果如下:将sql语句改为select*fromtestorderbyagedescnullslast;即可将null值排到

    2022年6月12日
    72
  • 因为计算机中丢失ssce5432.dll,ssce5432.dll 64位「建议收藏」

    因为计算机中丢失ssce5432.dll,ssce5432.dll 64位「建议收藏」ssce5432.dll64位是sentryspelling-checkerengine软件运行必不可少的文件,缺少这款文件将导致软件的部分功能无法实现,系统提示“ssce5432.dll找不到”或者“ssce5432.dll错误”等信息,本站提供ssce5432.dll64位下载,支持win7、win8、win10等系统,需要的朋友可以下载!ssce5432.dll使用方法:一、如果在运…

    2022年6月19日
    36
  • 树莓派控制摄像头_树莓派连接摄像头

    树莓派控制摄像头_树莓派连接摄像头树莓派外接摄像头,最常用的有两种:CSI摄像头、USB摄像头。当然网络摄像头也是可以的。一般的USB摄像头都是UVC免驱的,而且可以方便的插拔和安装,平时最为常用。一、硬件设备usb摄像头使用的罗技c310。(只要是UVC免驱就可以)二、连接并测试摄像头lsusb并将usb摄像头插上插入usb摄像头后,会显示设备ID和信息,像我的:Bus001Device008:ID046d:081bLogitech,Inc.WebcamC310…

    2022年10月10日
    2
  • 通达信5分钟.lc5和.lc1文件格式

    通达信5分钟.lc5和.lc1文件格式一、通达信日线*.day文件文件名即股票代码每32个字节为一天数据每4个字节为一个字段,每个字段内低字节在前00~03字节:年月日,整型04~07字节:开盘价*100,整型08~11字节:最高价*100,整型12~15字节:最低价*100,整型16~19字节:收盘价*100,整型2…

    2022年7月24日
    88
  • 用LoadRunner开发开心网外挂「建议收藏」

    用LoadRunner开发开心网外挂「建议收藏」现在基于WEB页面的网络游戏越来越流行,由于是基于HTTP的,因此应该可以用LoadRunner来开发外挂。今天略为试了一下,证实是可行的。以开心网的争车位游戏为例,用LoadRunner录制Web(HTTP/HTML)脚本,并进行适当的修改,主要是做一些关联和参数化。为速度起见,删掉一些资源请求的脚本。脚本摘录如下:Action(){char*parkID…

    2022年9月12日
    3

发表回复

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

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