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

<!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. Falcon Genome Assembly Tool Kit Manual

    Falcon Falcon: a set of tools for fast aligning long reads for consensus and assembly The Falcon too ...

  2. Canu Parameter Reference（canu参数介绍）

    链接:Canu Parameter Reference To get the most up-to-date options, run canu -options The default values ...

  3. 【转】android fragment 博客 学习

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37970961 自从Fragment出现,曾经有段时间,感觉大家谈什么都能跟Fra ...

  4. VC++源文件编码

    目录 第1章源代码文件    1 1.1 研究思路    1 1.2 实验结果    3 1.3 #pragma setlocale    4 1.4 /source-charset    5 1.5 ...

  5. decorators.xml的用法 （转）

    spring,hibernate框架做的,对了,还有jQuery. 我用jquery做异步请求到后台,生成json数据返回前台生成下拉输入框,请求到后台以后,成功生成了json数据并根据struts的 ...

  6. [JavaScript] 函数同名问题

    存在同名函数时,最后的函数会覆盖掉以前的同名函数. var x = 1, y = z = 0; function add(n) { return n = n + 1; } y = add(x); fu ...

  7. Android 反编译工具简介

    Android 反编译工具: 所需工具:1 apktool : 用于获取资源文件 2 dex2Jar : 用于将classes.dex转化成jar文件 2 jd-gui: 将jar文件转化成java文 ...

  8. 你需要知道的三个 CSS3技巧(转)

    1. 在CSS中用attr()显示HTML属性值 attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行.它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮 ...

  9. CentOS 常用命令大全

    下面,就给大家介绍这些CentOS常用命令. 一:使用CentOS常用命令查看cpu more /proc/cpuinfo | grep "model name" grep &qu ...

  10. ajax分页2：jquery.pagination +JSON 动态无刷新分页

    静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...