原生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程序设计有所帮助。

Javascript 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
JavaScript Array对象使用方法解析
Sep 24 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
You might like
php include,include_once,require,require_once
2008/09/05 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
php的debug相关函数用法示例
2016/07/11 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
对python过滤器和lambda函数的用法详解
2019/01/21 Python
python3人脸识别的两种方法
2019/04/25 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
python3获取当前目录的实现方法
2019/07/29 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
马云的职业生涯规划之路
2014/01/01 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
党员作风建设自查报告
2014/10/23 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
Django框架之路由用法
2022/06/10 Python
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL
python中validators库的使用方法详解
2022/09/23 Python