JS图片定时翻滚效果实现方法


Posted in Javascript onJune 21, 2016

本文实例讲述了JS图片定时翻滚效果实现方法。分享给大家供大家参考,具体如下:

<!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" />
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>图片向上翻滚效果</title>
  <style type="text/css">
   .father{
 

position:relative;
 

 overflow:hidden;
 

 height:100px;
 

 width:300px;
 
  }
   .box {
    float: left;
    font-size: 12px;
    width: 80px;
    height: 120px;
    overflow: hidden;
 
 position:absolute;
   }
  </style>
  <script language="javascript" type="text/javascript">
   var t;
   window.onload = function(){
    var o = document.getElementById('box');
    t = window.setInterval(function(){
     scrollup(o, 24, 0);
    }, 3000)
   }
   ///滚动主方法
   ///参数:o 滚动块对象
   ///参数:d 每次滚屏高度
   ///参数:c 当前已滚动高度
   function scrollup(o, d, c){
    if (d == (c - 78 )) {
     var t = getFirstChild(o.firstChild).cloneNode(true);
     o.removeChild(getFirstChild(o.firstChild));
     o.appendChild(t);
     t.style.marginTop = "0px";
    }
    else {
     c += 1;
     getFirstChild(o.firstChild).style.marginTop = -c + "px";
     window.setTimeout(function(){
      scrollup(o, d, c)
     }, 15);
    }
   }
   //解决firefox下会将空格回车作为节点的问题
   function getFirstChild(node){
    while (node.nodeType != 1) {
     node = node.nextSibling;
    }
    return node;
   }
  </script>
 </head>
 <body>
  滚动定时效果演示
 <hr>
 <div class="father">
   <div id="box">
    <div class="item">
     <img src="../img/head/1.png"/>
    </div>
    <div class="item">
     <img src="../img/head/2.png"/>
    </div>
 <div class="item">
     <img src="../img/head/3.png"/>
    </div>
 <div class="item">
     <img src="../img/head/4.png"/>
    </div>
   </div>
 </div>
 </body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
JQuery小知识
Oct 15 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
js实现的map方法示例代码
Jan 13 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
Vue计算属性的使用
Aug 04 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
Javascript删除指定元素节点的方法
Jun 21 #Javascript
jQuery插件扩展测试实例
Jun 21 #Javascript
早该知道的7个JavaScript技巧
Jun 21 #Javascript
BootStrap实现树形目录组件代码详解
Jun 21 #Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 #Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 #Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 #Javascript
You might like
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
django主动抛出403异常的方法详解
2019/01/04 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python 中如何获取列表的索引
2019/07/02 Python
Python调用C语言程序方法解析
2020/07/07 Python
golang/python实现归并排序实例代码
2020/08/30 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
上课打牌的检讨书
2014/02/15 职场文书
材料化学专业求职信
2014/07/15 职场文书
贫困证明怎么写
2015/06/16 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript
SpringBoot整合Minio文件存储
2022/04/03 Java/Android