php无缝连接滚动
最近用到了,仿照别人的写了一个
<!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无缝连接滚动的更多相关文章
- 关于图像文章垂直无缝连接滚动——JS实现
<!-- 作者:chenyehuacecil@163.com 时间:2015-02-04 描述:实现整篇文章从下到上的无缝连接滚动--><html xmlns="http: ...
- APP 半自适应 WEB页面
特别赶,响应式纯自适应的,有空写了新的发. (在手机上看,页面上看一定乱) <!DOCTYPE html><html> <head> <meta http-e ...
- marquee滚动,无缝连接的代码
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...
- IOS 2D游戏开发框架 SpriteKit-->续(postion,锚点,游戏滚动场景)
一. Postion 这里的postion和app开发中的layer.postion是一样的,postion的值代表该视图在父节点中的相对位置, 比如一个试图的父节点是self.view, 这里我们想 ...
- javascript实现图片无缝滚动(scrollLeft的使用方法介绍)
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" conten ...
- 替换"marquee",实现无缝滚动
js的marquee标签,可以实现元素循环滚动,但是不能无缝连接,要实现“无缝滚动”的效果必须使用js(借鉴百度),思路是使要滚动元素相对位置不断改变,上下滚动就相对top或者bottom,左右滚动就 ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- 【开源】专业K线绘制[K线主副图、趋势图、成交量、滚动、放大缩小、MACD、KDJ等)
这是一个iOS项目雅黑深邃的K线的绘制. 实现功能包括K线主副图.趋势图.成交量.滚动.放大缩小.MACD.KDJ,长按显示辅助线等功能 预览图 最后的最后,这是项目的开源地址:https://git ...
- Android点击列表后弹出输入框,所点击项自动滚动到输入框上方
使用微信的朋友圈会发现,点击某一条评论后输入框会弹出来,然后所点击的那一项会自动地滚动到输入框上方的位置,这样如果开始所点击的评论在屏幕很下方的话,就不会被输入框遮住,虽然微信这一点在我的MX2频繁点 ...
随机推荐
- unity3d magnitude的意义
http://blog.csdn.net/fzhlee/article/details/8663564 magnitude (Read Only) 返回向量的长度,也就是点P(x,y,z)到原点( ...
- javascript正则表达式介绍
正则表达式就是一个用来描述字符模式的对象.它被用来在文本中执行模式匹配(pattern-matching)以及”查找-替换”(search-and-replace)的任务.javascript中正则的 ...
- sass小总结
一般有两种后缀 .sass和.scss,推荐使用后者. 写下自己对sass的理解 1.变量 $border-color:#c66; $border:1px solid $border-color; ...
- 简单springMVC环境搭建
web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="htt ...
- 【堆栈应用一】一个数divided=几个最小质因数的乘积
/******************************************堆栈:一个数divided几个质因数(质因数的乘积为N)***************************** ...
- firefox hack
@-moz-document url-prefix(){ css选择器 { css样式设置 } }
- Java--常用类summary
/* 2:API的概述(了解) (1)应用程序编程接口. (2)就是JDK提供给我们的一些提高编程效率的java类. 3:Object类(掌握) (1)Object是类层次结构的根类,所有的类都直接或 ...
- 手动实现ArrayList
public interface List { public void insert(int i,Object obj)throws Exception; public void delete(int ...
- TreeList用法(1)
本人按照网上搜的一些小用法整理的: 如果要出现左边的效果,代码如下: public DataTable CreateDataTable() { DataTable ...
- 创建论坛Discuz
下载discuz! mkdir /data/wwwcd /data/wwwwget http://download.comsenz.com/DiscuzX/3.2/Discuz_X3.2_SC_GB ...