js实现标准无缝滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
#warp{
width: 1200px;
height: 300px;
overflow: hidden;
margin:100px auto 0;
}
#warp #con{
width: 4000px;
height: 300px;
overflow: hidden;
}
#warp #con #box1{
float: left;
overflow: hidden;
}
#warp #con #box2{
float: left;
overflow: hidden;
}
#warp img{
float: left;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div id="warp">
<div id="con">
<div id="box1">
<img src="data:images/meinv1.jpg" alt="">
<img src="data:images/meinv2.jpg" alt="">
<img src="data:images/meinv3.jpg" alt="">
<img src="data:images/meinv4.jpg" alt="">
<img src="data:images/meinv5.jpg" alt="">
<img src="data:images/meinv6.jpg" alt="">
</div>
<div id="box2"></div>
</div>
</div>
<script>
var warp=document.getElementById('warp');
var con=document.getElementById('con');
var box1=document.getElementById('box1');
var box2=document.getElementById('box2');
// box2.innerHTML=box1.innerHTML;
var timer1=null,x=0;
function scroll(){//滚动函数
box2.innerHTML=box1.innerHTML;
timer1=setInterval(function(){
x++;
if (x>=box1.clientWidth) {
x=0;
warp.scrollLeft=x;
}
warp.scrollLeft=x;
},10)
}
scroll();
warp.onmouseenter=function(){
clearInterval(timer1);
}
warp.onmouseleave=function(){
scroll();
}
</script>
</body>
</html>
这种效果的主要思想是图片内容部分的宽度要远远大于要展示区域的宽度，使其出现滚动条。复制上一组图片的内容使其在效果上实现无缝滚动，具体的请大家参考代码。
js实现标准无缝滚动的更多相关文章
- js动画之无缝滚动
效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- js文字的无缝滚动（上下）
使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...
- JS 在 HTML 无缝滚动
marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...
- js原生实现 无缝滚动图片
<!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...
- 图片滚动js 实现图片无缝滚动
在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...
- js实现表格无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JS实现图片无缝滚动特效；附addEventListener()方法、offsetLeft和offsetWidth属性。
一:html部分 <body> <input id="btn1" type="button" value="向左"> ...
- 用JS写的无缝滚动特效
代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
- js 图片实现无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 使用ExifInterface设置Datetime发生的问题
最近在弄一个Android小程序,需要把图像的生成时间设置到Exif的Datetime,用ExifInterface.setAttribute(ExifInterface.TAG_DATETIME,& ...
- 机器学习&数据挖掘笔记_13（用htk完成简单的孤立词识别）
最近在看图模型中著名的HMM算法,对应的一些理论公式也能看懂个大概,就是不太明白怎样在一个具体的机器学习问题(比如分类,回归)中使用HMM,特别是一些有关状态变量.观察变量和实际问题中变量的对应关系, ...
- Elasticsearch聚合 之 Ip Range IP地址范围聚合
相对于range和date range,这个聚合就是能够表示IP的范围. 普通IP模式 DSL命令: { "aggs":{ "ip_ranges":{ &quo ...
- IE条件注释详解
IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句,作用是可以灵活的为不同IE版本浏览器导入不同html元素,如:样式表,html标签等.很显然这种方法的最大好处就在于属于微软官方给出的兼容解决 ...
- 使用Python将HTML转成PDF
主要使用的是wkhtmltopdf的Python封装--pdfkit 安装 1. Install python-pdfkit: $ pip install pdfkit 2. Install wkht ...
- MyKTV
namespace MyKTVClient{ public partial class FrmOrderBySinger : Form { private string singerSex = &qu ...
- 【转】 NoSQL初探之人人都爱Redis：（4）Redis主从复制架构初步探索
一.主从复制架构简介 通过前面几篇的介绍中,我们都是在单机上使用Redis进行相关的实践操作,从本篇起,我们将初步探索一下Redis的集群,而集群中最经典的架构便是主从复制架构.那么,我们首先来了解一 ...
- 显示XML文档时排序数据
先看XML文档: 也可拷贝下面代码另存为XMl文档: <stepList> <steps> <step> <order>1</order> ...
- 将BootstrapJS和AngularJS结合使用以及为什么不用jQuery
原文网址链接:http://ourjs.com/detail/54e18c51232227083e000034Bootstrap 和 Angular 都是人们大量使用的工具.在很多项目中,它们需要 ...
- Oracle-- (RANK) 排名函数
内容来自: Oracle® Database SQL Language Reference 11g Release 2 (11.2) E41084-03. empolyees表来自hr方案. RANK ...