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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
理解Javascript_12_执行模型浅析
Oct 18 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
JavaScript中操作字符串小结
May 04 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 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通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
js获取class的所有元素
2013/03/28 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
express框架下使用session的方法
2019/07/31 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
js制作提示框插件
2020/12/24 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
Python中内建函数的简单用法说明
2016/05/05 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
什么是Assembly(程序集)
2014/09/14 面试题
.NET面试题:什么是反射
2016/09/30 面试题
副总经理岗位职责
2015/02/02 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
董事长新年致辞
2015/07/29 职场文书
教师节随笔
2015/08/15 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js