最近用到了,仿照别人的写了一个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<!--“向左”，“滚动”，这是要解决的要点，而这两方向，都与对象的scrollLeft属性相关。对于scrollLeft,直白理解就是：对象的内容（即其整个innerHTML)，如果能够左右滚动的话（这是前提条件），它在某时刻左边滚动了的像素距离（结果为数字，并且该属性是可写可读的）。这里需要注意的是，虽然document.body.scrollLeft需要考虑兼容性问题，但其它的div的scrollLeft是兼容的，这里无需考虑兼容性问题。

所以不管读取或者设置scrollLeft的值，都必须有个前提条件：能左右滚动！！！

比如有一个id=mydiv的DIV,在一个不能左右滚动的前提条件下，比如其overflow设置为visible或者overflow没有设置.它会怎么样呢？

mydiv会表现为被内容自动撑开,内容有多长多宽，div就自动多长多宽，div不出现滚动条。这时候scrollLeft读取到的值为0，并且无论如何设置scrollLeft的值，它都为0。这可以说明，如果其不能左右滚动，那scrollLeft就一直为0.

接下来，我们准备制造出“能左右滚动”的这种前提条件。

要出现scrollLeft，就必须：能左右滚动。这个限制会让我们将对象的overflow属性设置成auto，hidden,scroll,并且限制对象的width。但往往auto只会造成上下滚动而非左右。所以我们只能考虑scroll与hidden。-->

<style>

#mydiv{width:600px; height:100px; margin:100px; border:3px solid #8ec2f5; padding:0; background:#d6e9fc; overflow:hidden;}

#mysubdiv{margin:0; padding:0; width:9999px; height:100px}

#mypicdiv{margin:0; padding:0; width:auto; height:100px; float:left;}

#mypicdiv2{margin:0; padding:0; width:auto; height:100px; float:left}

img{width:100px; height:100px}

#mydiv a{float:left; margin:0 10px;}

</style>

</head>

<!--目前它要走的空白已经短了，为了让它的空白全部消除，最原先我们的办法可以是：

1.多造几个mypicdiv那样的浮动块，占够位置。

2.将mysubdiv的width改少一些。

但这两种办法都无法彻底将空白删除，不是剩余空白就是不够空白导致换行。

那有没有一种办法能够不用消灭空白而直接可以“连接向左滚动”的呢？

办法就是：当刚好滚动了一个mypicdiv的距离的时候（"刚好"的意思，这需要很精细的刻度，所以需要让scrollLeft每次变化尽量少，即每次变化+1,而一个mypicdiv的距离，需要用到对象属性：offsetWidth），又重新回到mypicdiv去滚动（即让scrollLeft=0)。这样，就会连续滚动mypicdiv,并且后边接着的mypicdiv2就能造成无缝的效果。

代码如下：-->

<body>

<div id="mydiv">

<div id="mysubdiv">

<div id="mypicdiv">

<a href="#"><img src="data:images/3925982_001.jpeg" /></a>

<a href="#"><img src="data:images/3925983_02.jpeg" /></a>

<a href="#"><img src="data:images/3919037_二维码_14322baa-270b-4841-aa83-5a8d211b610b_resize_picture.png" /></a>

<a href="#"><img src="data:images/3925979_01.jpeg" /></a>

<a href="#"><img src="data:images/3925985_002.jpeg" /></a>

<a href="#"><img src="data:images/3925986_03.jpeg" /></a>

<a href="#"><img  src="data:images/3925989_003.jpeg" /></a>

</div>

<div id="mypicdiv2"></div>

</div>

</div>

</body>

<script>

var speed = 10;

var mydiv = document.getElementById('mydiv');

var mypicdiv = document.getElementById('mypicdiv');

var mypicdiv2 = document.getElementById('mypicdiv2');

mypicdiv2.innerHTML = mypicdiv.innerHTML;

var myScroll = function(){

if(mydiv.scrollLeft>=mypicdiv2.offsetWidth){

    mydiv.scrollLeft=0;

    mydiv.scrollLeft-=mypicdiv.offsetLeft;

    }else{

mydiv.scrollLeft = mydiv.scrollLeft+1;

}

}

/*根据人眼每帧看到的24幅画面以上则认为是连续动画效果,让1000/24~=42.当数量大于24时,speed小于42,设置speed为小于42的数值最佳,让滚动显示无缝,流畅  另外,速度越小,滚动越快*/

//window.setInterval(myScroll,speed);

<!--鼠标经过时停止滚动 用clearInterval 清除定时器-->

    var MyMar=setInterval(myScroll,speed);

    mydiv.onmouseover=function() {clearInterval(MyMar)};

    <!--鼠标移开时重设定时器-->

    mydiv.onmouseout=function() {MyMar=setInterval(myScroll,speed)};

</script>

<!--这样就简单地完成了一个图片无缝向左滚动。设置mydiv的overflow:hidden，去除滚动条（但隐式地有“能左右滚动”），让美观更好一点。注意：document.title=mydiv.scrollLeft;这一行只用于调试查看，实际用途中必须删除。-->

<!--从JS角度上看，需要知道的技术也不过如下：

innerHTML,scrollLeft,offsetWidth,setInterval-->

</html>

php无缝连接滚动的更多相关文章

  1. 关于图像文章垂直无缝连接滚动——JS实现

    <!-- 作者:chenyehuacecil@163.com 时间:2015-02-04 描述:实现整篇文章从下到上的无缝连接滚动--><html xmlns="http: ...

  2. APP 半自适应 WEB页面

    特别赶,响应式纯自适应的,有空写了新的发. (在手机上看,页面上看一定乱) <!DOCTYPE html><html> <head> <meta http-e ...

  3. marquee滚动，无缝连接的代码

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  4. IOS 2D游戏开发框架 SpriteKit-->续(postion,锚点,游戏滚动场景)

    一. Postion 这里的postion和app开发中的layer.postion是一样的,postion的值代表该视图在父节点中的相对位置, 比如一个试图的父节点是self.view, 这里我们想 ...

  5. javascript实现图片无缝滚动（scrollLeft的使用方法介绍）

    <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" conten ...

  6. 替换"marquee"，实现无缝滚动

    js的marquee标签,可以实现元素循环滚动,但是不能无缝连接,要实现“无缝滚动”的效果必须使用js(借鉴百度),思路是使要滚动元素相对位置不断改变,上下滚动就相对top或者bottom,左右滚动就 ...

  7. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  8. 【开源】专业K线绘制[K线主副图、趋势图、成交量、滚动、放大缩小、MACD、KDJ等）

    这是一个iOS项目雅黑深邃的K线的绘制. 实现功能包括K线主副图.趋势图.成交量.滚动.放大缩小.MACD.KDJ,长按显示辅助线等功能 预览图 最后的最后,这是项目的开源地址:https://git ...

  9. Android点击列表后弹出输入框，所点击项自动滚动到输入框上方

    使用微信的朋友圈会发现,点击某一条评论后输入框会弹出来,然后所点击的那一项会自动地滚动到输入框上方的位置,这样如果开始所点击的评论在屏幕很下方的话,就不会被输入框遮住,虽然微信这一点在我的MX2频繁点 ...

随机推荐

  1. 反射-优化及程序集等(用委托的方式调用需要反射调用的方法(或者属性、字段),而不去使用Invoke方法)

    反射-优化及程序集等(用委托的方式调用需要反射调用的方法(或者属性.字段),而不去使用Invoke方法)   创建Delegate (1).Delegate.CreateDelegate(Type, ...

  2. C# 中的弱引用 WeakReference

    C#中的弱引用(WeakReference)   我们平常用的都是对象的强引用,如果有强引用存在,GC是不会回收对象的.我们能不能同时保持对对象的引用,而又可以让GC需要的时候回收这个对象呢?.NET ...

  3. C++ Primer 第三章 标准库类型vector+迭代器iterator 运算

    1.vector: 标准库类型vector表示对象的集合,其中所有对象的类型都相同,集合中的每个对象都有一个与之对应的索引,索引用于访问对象.因为vector“容纳着”其他对象,所以它也常被称作容器( ...

  4. each用法

    1.数组用法 <script> var s=["s","i","l","e","n",& ...

  5. grouping sets,cube,rollup,grouping__id,group by

    例1: hive -e" select type ,status ,count(1) from usr_info where pt='2015-09-14' group by type,st ...

  6. linux下shell统计文件目录下所有代码行数

    功能,统计某一目录下所有文件代码行数: 例如统计某一目录下所有.c结尾的文件代码行数:find . -name "*.c"|xargs cat|grep -v ^$|wc -l ^ ...

  7. http协议分析工具【转】

    转自:http://www.cnblogs.com/klguang/p/4624333.html

  8. Spring配置文件解析--集合注入方法

    <bean id="moreComplexObject" class="example.ComplexObject"> <property n ...

  9. Javascript之对象的继承

    继承是面向对象语言一个非常重要的部分.许多OOP语言都支持接口继承和实现继承两种方式.接口继承:继承方法签名:实现继承:继承实际的方法.在ECMAScript中函数是没有签名的,所以也就无法实现接口继 ...

  10. Mysql复制表格

    1.复制表结构及数据到新表 CREATE TABLE 新表 as SELECT * FROM 旧表 不过这种方法的一个最不好的地方就是新表中没有了旧表的primary key.Extra(auto_i ...