文档章节

js 无缝滚动

冰糖710
 冰糖710
发布于 2015/05/13 15:52
字数 499
阅读 6
收藏 0
  1 <html>
  2      <head>
  3          <meta charset=utf-8 />
  4          <script type="text/javascript">
  5              /**
  6               +-----------------------------
  7               *  @desc js 无缝滚动
  8               *  @date 2013年02月18日 22:32
  9               +-----------------------------
 10               */
 11              function S(str_id,xy,speed){
 12                  var obj = null,time;
 13                  speed = typeof speed == 'string' || typeof speed == 'undefined' ? 30 : speed;
 14                  xy = typeof xy == 'undefined' ? 'x' : xy;
 15                  if(typeof str_id == 'string'){
 16                      obj = document.getElementById(str_id);
 17                  }else if(typeof str_id == 'object'){
 18                      obj = str_id;
 19                  }
 20                 var content = obj.innerHTML,
 21                     id = obj.getAttribute("id"),
 22                     obj_in = document.createElement("div"),
 23                     obj_1 = document.createElement("div"),
 24                     obj_2 = document.createElement("div");
 25                 obj.innerHTML = '';
 26                 obj.style.overflow = 'hidden';
 27                 obj_in.setAttribute("id",id+"_in");
 28                 obj_1.setAttribute("id",id+"_1");
 29                 obj_1.innerHTML = content;
 30                 obj_2.setAttribute("id",id+"_2");
 31                 obj_2.innerHTML = content;
 32                 if(xy == 'x'){
 33                      if(!+[1,]){
 34                          obj_1.style.styleFloat = 'left';
 35                          obj_2.style.styleFloat = 'left';
 36                      }else{
 37                          obj_1.style.cssFloat = 'left';
 38                          obj_2.style.cssFloat = 'left';
 39                      }
 40                      obj_in.style.width = "710%";
 41                 }else{
 42                      obj_in.style.height = '710%';
 43                 }
 44                 obj.appendChild(obj_in);
 45                 obj_in.appendChild(obj_1);
 46                 obj_in.appendChild(obj_2);
 47                 time = setInterval(function(){
 48                      Syd();
 49                 },speed);
 50                 function Syd(){
 51                      if(xy == 'x'){
 52                           if(obj_2.offsetWidth <= obj.scrollLeft)
 53                                obj.scrollLeft -= obj_1.offsetWidth;
 54                           else
 55                               obj.scrollLeft++;
 56                      }else{
 57                           if(obj_2.offsetHeight <= obj.scrollTop)
 58                                obj.scrollTop -= obj_1.offsetHeight;
 59                           else
 60                               obj.scrollTop++;
 61                      }
 62                 }
 63                 obj.onmouseover = function(){
 64                     clearInterval(time);
 65                 }
 66                 obj.onmouseout = function(){
 67                      time = setInterval(function(){Syd();},speed);
 68                 }
 69              }
 70              window.onload = function(){
 71                  new S('why','x',90);
 72                  new S('pa');
 73                  new S("wp",'y',40);
 74              }
 75          </script>
 76          <style type="text/css">
 77              *{font-size:12px;margin:0;padding:0;}
 78          </style>
 79      </head>
 80      <body>
 81          <div id="why" style="width:100px;">
 82              <span>此生不换</span>
 83              <span>秋意浓</span>
 84              <span>爱要怎么说出口</span>
 85              <span>你把我灌醉</span>
 86          </div>
 87          <div id="pa" style="width:71px;">
 88              <span>生生世世</span>
 89              <span>爱你一生</span>
 90              <span>小不点</span>
 91              <span>雪梨</span>
 92          </div>
 93          <div id="wp" style="height:80px;">
 94              <p>百度一下,你就知道</p>
 95              <p>360云盘</p>
 96              <p>淘宝网</p>
 97              <p>土豆</p>
 98              <p>爱奇艺</p>
 99          </div>
100      </body>
101  </html>

 

 

哎,今天调无缝滚动调伤心了,一个页面滚动的地方太多了,在网上找的基本上都是差不多,多使用几次,变量什么的都乱套了,抽时间看了下无缝滚动原理,写了个无缝滚动js。基本测试能运行。

本文转载自:http://www.cnblogs.com/hxtgirq710/archive/2013/02/18/2916332.html

冰糖710
粉丝 4
博文 10
码字总数 0
作品 0
程序员
私信 提问
抢先预览 ExtJS 4.2 的表格控件

在新发布的Ext JS 4.2测试版中,我们做了许多的改动。你可以在论坛公告处查看所有详细信息。在这篇文章中,我们将着重介绍性能提升的Grid组件。在之前关于Ext Js 4.1性能和基于此版本的应用的...

oschina
2013/01/23
2.9K
1
记一个JavaScript图片轮播思路与代码

说在前头 喜欢并学习前端,一路摸爬滚打过来,现在算算也快满一年的,每天或多或少都会来“拜读”大家的写的文章,学习与感悟了不少,作为一名要变的更强的前端小哥哥,在这个节点上,也想写...

柚子先生
2018/08/06
0
0
[javascript]文字无缝向上滚动

静态代码: 解释:首先最外层是一个高度只有30px的层,这样大概只能显示一行文字。然后里面有一个 #marquee的层,这个层包含了很多段文字,高度实际超出30px很多,我们要实现的就是将#marque...

吾爱
2014/09/05
6.4K
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
63
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
2018/06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

iOS Xcode升级包地址(感谢大神)

下载地址:DeviceSupport

_____1____
16分钟前
6
0
Qt编写自定义控件71-圆弧进度条

一、前言 现在web形式的图表框架非常流行,国产代表就是echart,本人用过几次,三个字屌爆了来形容,非常强大,而且易用性也非常棒,还是开源免费的,使用起来不要太爽,内置的各种图表和仪表...

飞扬青云
16分钟前
4
0
润乾报表与 ActiveReport JS 功能对比

简介 润乾报表是用于报表制作的大型企业级报表软件,核心特点在于开创性地提出了非线性报表数学模型,采用了革命性的多源关联分片、不规则分组、自由格间运算、行列对称等技术,使得复杂报表...

泡泡糖儿
28分钟前
5
0
【1015】LNMP架构二

【1015】LNMP架构二 三、PHP安装 PHP安装和LAMP安装PHP方法有差别,需要开启php-fpm服务 1、下载PHP7至/usr/local/src/ 切换目录:cd /usr/local/src 2、解压缩 tar -jxvf php-7.3.0.tar.gz...

飞翔的竹蜻蜓
今天
5
0
浅谈Visitor访问者模式

一、前言 什么叫访问,如果大家学过数据结构,对于这点就很清晰了,遍历就是访问的一般形式,单独读取一个元素进行相应的处理也叫作访问,读取到想要查看的内容+对其进行处理就叫作访问,那么...

青衣霓裳
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部