编程 Javascript

原生javascript实现图片无缝滚动效果

Posted in Javascript onFebruary 12, 2016

图片水平无缝滚动效果在大量的网站都有应用，特别是一些企业网站在展示产品的时候，因为是动态效果，所以能够给网站增色不少，相比静态图片展示更能够吸引用户的注意力，下面就通过实例代码介绍一下如何实现此效果。
代码如下:

<html>
<head>
<meta charset="gb2312">
<title>三水点靠木</title>
<style type="text/css"> 
#demo{ 
 background:#FFF; 
 overflow:hidden; 
 border:1px dashed #CCC; 
 width:500px; 
} 
#indemo{
 float:left;
 width:2000px;
} 
#indemo a{
 width:100px;
 height:100px;
 float:left;
 background-color:blue;
 margin-left:5px;
 text-align:center;
 line-height:100px;
 color:red;
 text-decoration:none;
}
#demo1{float:left;} 
#demo2{float:left;} 
</style>
<script type="text/javascript"> 
window.onload=function(){
 var speed=10; 
 var tab=document.getElementById("demo"); 
 var tab1=document.getElementById("demo1"); 
 var tab2=document.getElementById("demo2"); 
 tab2.innerHTML=tab1.innerHTML; 
 function Marquee(){ 
 if(tab2.offsetWidth-tab.scrollLeft<=0){
  tab.scrollLeft-=tab1.offsetWidth 
 } 
 else{ 
  tab.scrollLeft++; 
 } 
 } 
 var MyMar=setInterval(Marquee,speed); 
 tab.onmouseover=function() {clearInterval(MyMar)}; 
 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 
} 
</script>
</head>
<body>
<div id="demo">
 <div id="indemo">
 <div id="demo1"> 
  <a href="#">三水点靠木一</a> 
  <a href="#">三水点靠木二</a> 
  <a href="#">三水点靠木三</a> 
  <a href="#">三水点靠木四</a> 
  <a href="#">三水点靠木五</a> 
  <a href="#">三水点靠木六</a> 
 </div>
 <div id="demo2"></div>
 </div>

希望对大家学习javascript程序设计有所帮助。

- Author -

愚蠢的神

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript获取和设置CheckBox状态的简单方法

Jul 05 Javascript

详谈JavaScript内存泄漏

Nov 14 Javascript

js实现带按钮的上下滚动效果

May 12 Javascript

如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标

Dec 21 Javascript

Extjs表单输入框异步校验的插件实现方法

Mar 20 Javascript

ES6中class类用法实例浅析

Apr 06 Javascript

canvas简单快速的实现知乎登录页背景效果

May 08 Javascript

使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

Jul 24 Javascript

详谈js对url进行编码和解码(三种方式的区别)

Aug 16 Javascript

JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】

Feb 18 Javascript

vuex存值与取值的实例

Nov 06 Javascript

vue+render+jsx实现可编辑动态多级表头table的实例代码

Apr 01 Javascript

JavaScript实现点击单元格改变背景色的方法

Feb 12 #Javascript

JavaScript实现弹出模态窗体并接受传值的方法

Feb 12 #Javascript

JavaScript判断表单为空及获取焦点的方法

Feb 12 #Javascript

利用JS生成博文目录及CSS定制博客

Feb 10 #Javascript

浅析javascript函数表达式

Feb 10 #Javascript

详解AngularJS中的http拦截

Feb 09 #Javascript

详解Javacript和AngularJS中的Promises

Feb 09 #Javascript