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

<!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. java 集合（Set2）

    TreeSet: 1.向TreeSet添加元素时 如果元素具有自然特性,那么就按照元素的自然顺序的特点进行排序储存. 如果不具备,就要实现Compareable接口中的compareTo() 方法. ...

  2. 关于as中的事件与回调函数

    对于Observer模式, 在as中object(被观察者)既可以用事件(event),也可以用回调函数(caller)来通知观察者(observer).那在实际的开发中到底应该选择用event还是用 ...

  3. linux笔记：linux软件包管理，软件安装位置

    linux软件包简介 软件包分类:1.源码包(用C语言等编写的源代码,没有进行编译):脚本安装包(对源码包进行了安装优化的源码包)优点:开源,可修改可以自由选择所需的功能编译安装,更适合自己的系统,稳 ...

  4. setInterval小问题

    先看下面代码: for (var i = 0; i < 3; i++) { setTimeout(function () { console.log(i) }, 1000); } 运行效果是 输 ...

  5. js的with语句使用方法

    1)简要说明         with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性.要给对象创建新的属性,必须明确地引用该对象. 2)语法格式  with(object ...

  6. Node.js 开发模式（设计模式）

    Asynchronous code & Synchronous code As we have seen in an earlier post (here), how node does th ...

  7. 50 个最棒的 jQuery 日历插件，很齐全了！(转)

    http://www.php100.com/html/it/qianduan/2015/0326/8856.html 什么介绍都没有,直接上酸菜! 1. Even Touch Calendar 2.  ...

  8. 转 数据库中的 date datetime timestamp的区别

    转 数据库中的 date datetime timestamp的区别 DATETIME, DATE和TIMESTAMP类型是相关的.本文描述他们的特征,他们是如何类似的而又不同的. DATETIME类 ...

  9. java json 的生成和解析 --json-lib

    类(java json的解析和生成): import java.util.HashMap; import java.util.Map; import net.sf.json.JSONArray; im ...

  10. java入门第四步之应用服务器的安装（Tomcat）【转】

    首先打开myeclipse,在myeclipse菜单栏下面有两个按钮: 左边的按钮是进行项目的部署的(即将项目部署到服务器上),右边的按钮是进行服务器的启动的,如果你安装了tomcat服务器,那你就可 ...