原生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 相关文章推荐
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
bootstrap表单示例代码分享
May 18 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 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中数组合并的两种方法及区别介绍
2012/09/14 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python list转dict示例分享
2014/01/28 Python
Python的设计模式编程入门指南
2015/04/02 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
纯css3实现照片墙效果
2014/12/26 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
物理力学求职信
2014/02/18 职场文书
小学教师评语大全
2014/04/23 职场文书
项目合作意向书模板
2014/07/29 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle