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 相关文章推荐
Google 静态地图API实现代码
Nov 19 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
用vue 实现手机触屏滑动功能
May 28 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笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
PHP查询网站的PR值
2013/10/30 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
javascript中 try catch用法
2015/08/16 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
进一步了解Python中的XML 工具
2015/04/13 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
python自动化报告的输出用例详解
2018/05/30 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
python实现程序重启和系统重启方式
2020/04/16 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
干部考核评语
2014/04/29 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
孟佩杰观后感
2015/06/17 职场文书
2015小学师德工作总结
2015/07/21 职场文书
消防安全主题班会
2015/08/12 职场文书
vue实现在data里引入相对路径
2022/06/05 Vue.js