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

<!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. SwitchCompat 修改颜色

    Ok, so I'm sorry but most of these answers are incomplete or have some minor bug in them. The very c ...

  2. wps的几个优点

    wps的几个优点 1.wps非常小巧,wps2011源文件38M,安装后160M,wps2010安装过后158M,工具栏.程序设置.模板可保存在一个文件里面,重装后用\WPS Office Perso ...

  3. java 集合（Map2）

    Map 接口的迭代方法: import java.util.*; public class ex12 { public static void main(String[] args) { Map< ...

  4. 设置pictureBox的边框颜色

    private void pictureBox2_Paint(object sender, PaintEventArgs e) { PictureBox p = (PictureBox)sender; ...

  5. TCP与UDP

    TCP(Transmission Control Protocol,传输控制协议)是面向连接的协议:可靠.保证正确性:顺序到达:流量控制.拥塞控制:重传机制.窗口机制:对系统资源.时间要求多:流模式S ...

  6. Response返回JSON数据到前台页面

    转自博文:<Response JSON数据返回>http://blog.csdn.net/anialy/article/details/8665471 简述: 在servlet填充Resp ...

  7. CRM创建物料FM1

    这是在中联混凝土那边搞的.... method create_prd.  data: lt_return type bapiret2_tab,        ls_return like line o ...

  8. Prim算法与Dijkstra算法的联系与区别

    /* 图结构,邻接矩阵形式 */ ElemType nodes[n]; int edges[n][n]; prim_or_dijkstra( int index, bool usePrim ) /* ...

  9. Excel VBA记录

    -----------快捷键---------- 函数等提示(默认):ctrl+j 注释:上单引号' 设置单元格为空可以用:empty/null -----------基础语法--------- 基本 ...

  10. Axis2 webservice入门--写个简单的webservice

    上一篇介绍了webservice开发前的准备.下面开始写webservice.如果不了解axis2请看上一篇,如果是新手:建议一边看一边写代码,自己动手完成这个过程. 一.新建一个web项目 二.新建 ...