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 相关文章推荐
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
Vue常用指令详解分析
Aug 19 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
你准备好迎接vue3.0了吗
Apr 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之第十天
2006/10/09 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
蛋糕店创业计划书
2014/05/06 职场文书
项目投资合作意向书
2014/07/29 职场文书
2014最新离职证明范本
2014/09/12 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
爱国主义电影观后感
2015/06/18 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android