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

<!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. C语言中的转义字符

    转义字符 意义 ASCII码值(十进制) \a 响铃(BEL) 007 \b 退格(BS) ,将当前位置移到前一列 008 \f 换页(FF),将当前位置移到下页开头 012 \n 换行(LF) ,将 ...

  2. 关于json的理解

    一. 获取数组长度 array.length 获取对象长度  Object.keys(objs).length 二. 如何抉择{}和[] 先说两者区别, {}:父类下面直接是子类名称 []:父类下会追 ...

  3. left join与on,where 结合一起用的异同

    I.数据库在通过连接两张或多张表来返回记录时,都会生成一张中间的临时表,然后再将这张临时表返回给用户. 在使用left join时,on和where条件的区别如下: 1. on条件是在生成临时表时使用 ...

  4. [bootstrap] bootstrap 简介和相关网址

    Bootstrap 来自 Twitter,是目前很受欢迎的前端框架. 基于 HTML.CSS.JAVASCRIPT ,简洁灵活,使 Web 开发更加快捷. Bootstrap提供了优雅的HTML和CS ...

  5. HDU----(4291)A Short problem(快速矩阵幂)

    A Short problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  6. 修改weblogic部署的应用名称

    通过weblogic管理后台console进行发布本地项目的时候,它会默认以WEB-INF的上一级目录作为访问路径,如,假如你的项目WEB-INF目录的上一层是WebRoot,那么发布后,访问的路径默 ...

  7. js中获得当前时间是年份和月份

    js中获得当前时间是年份和月份,形如:201208       //获取完整的日期 var date=new Date; var year=date.getFullYear();  var month ...

  8. JNI的一些知识：

    JNI字段描述符"([Ljava/lang/String;)V" 2012-05-31 12:16:09| 分类: Android |举报|字号 订阅 "([Ljava/ ...

  9. 一些qml资料

    qml开发ios应用 http://www.seanyxie.com/qt-qml%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91%E4%B9%8B%E5%9C%A8ios%E ...

  10. 目前几款基于html5的前端框架：如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...