符合W3C Web标准的图片连续无间隙水平滚动
这次又遇上一个这样的问题,找了老半天终于从网上找到一个不错的,看了下代码,思路很简单,但代码太多,通用性也不行,于是乎,自己又发明了两个函数,用起来感觉还真不错,与大家共享:
图片连续无间隙向左滚动,无间隙向右滚动,符合W3C Web标准_
|
|
//调用向左滚动
toleft("demo","demo1","demo2",30,"hehe123")
//调用向右滚动
toright("demo0","demo11","demo22",20,"hehe1123")
function $(id){return document.getElementById(id)}
//向左滚动函数,demo包含demo1与demo2,speed是滚动速度,flag一个网页内有多个时设置为不同的任意字符。
//by 柳永法(yongfa365)'Blog www.yongfa365.com
function toleft(demo,demo1,demo2,speed,flag){
demo=$(demo);demo1=$(demo1);demo2=$(demo2)
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
以下为网上提供的代码
Untitled Document
|
|
/*
**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码(支持左移/右移功能)(本示例为上下两行图片进行双行滚动)
**
**实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,
**通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,
**因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到"无缝"滚动的目的。
*/
var speed1=0 //图片左移的速度
var MyMar1 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
var MyMar2 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
var lefthit=0 //记录左移按钮点击次数
var righthit=0 ////记录右移按钮点击次数
//调用右移方法前,先让左移停止(clearInterval清除setInterval对方法的调用)
function clearleft(){
clearInterval(MyMar1)
clearInterval(MyMar2)
}
//图片左移的方法
function toleft(){
//判断是否是第一次按下左移按钮(图片往左开始移动的时候,不会在调用此方法。只有当按了右移按钮时,才会把lefthit重设为0)
if(lefthit==0){
speed1=30;//图片左移速度时间毫秒
//让的内容demo2与demo1内容一样
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
//上行图片移动的方法
function Marquee1(){
//当demo滚动至demo2的交界处。与就是与demo2重合时。offsetWidth与scrollLeft刚好相等
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]