zoukankan      html  css  js  c++  java

  • 可以上下左右滚动的经典代码

    一个可以上下左右滚动的经典代码。
      1<HTML> 
      2<HEAD> 
      3<TITLE>滚动效果</TITLE> 
      4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
      5</HEAD> 
      6<BODY STYLE="overflow: hidden; border: 0" topmargin=0 leftmargin=0> 
      7<table> 
      8<tr><td style="padding: 5"> 
      9<div id="testDiv" style="border: buttonface 2 solid"> 
     10<img src="http://bbs.blueidea.com/images/blue/logo.gif"> 
     11</div> 
     12<script language="JScript"> 
     13function scroll(obj, oWidth, oHeight, direction, drag, zoom, speed) 
     14{ 
     15  var scrollDiv    = obj 
     16  var scrollContent  = document.createElement("span") 
     17  scrollContent.style.position = "absolute" 
     18  scrollDiv.applyElement(scrollContent, "inside") 
     19  var displayWidth  = (oWidth != "auto" && oWidth ) ? oWidth : scrollContent.offsetWidth + parseInt(scrollDiv.currentStyle.borderRightWidth) 
     20  var displayHeight  = (oHeight != "auto" && oHeight) ? oHeight : scrollContent.offsetHeight + parseInt(scrollDiv.currentStyle.borderBottomWidth) 
     21  var contentWidth  = scrollContent.offsetWidth 
     22  var contentHeight  = scrollContent.offsetHeight 
     23  var scrollXItems  = Math.ceil(displayWidth / contentWidth) + 1 
     24  var scrollYItems  = Math.ceil(displayHeight / contentHeight) + 1 
     25  scrollDiv.style.width   = displayWidth 
     26  scrollDiv.style.height   = displayHeight 
     27  scrollDiv.style.overflow = "hidden" 
     28  scrollDiv.setAttribute("state", "stop") 
     29  scrollDiv.setAttribute("drag", drag ? drag : "horizontal") 
     30  scrollDiv.setAttribute("direction", direction ? direction : "left") 
     31  scrollDiv.setAttribute("zoom", zoom ? zoom : 1) 
     32  scrollContent.style.zoom = scrollDiv.zoom 
     33  var scroll_script =  "var scrollDiv = " + scrollDiv.uniqueID                    +"\n"+ 
     34        "var scrollObj = " + scrollContent.uniqueID                  +"\n"+ 
     35        "var contentWidth = " + contentWidth + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"  +"\n"+ 
     36        "var contentHeight = " + contentHeight + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"  +"\n"+ 
     37        "var scrollx = scrollObj.runtimeStyle.pixelLeft"                +"\n"+ 
     38        "var scrolly = scrollObj.runtimeStyle.pixelTop"                  +"\n"+ 
     39        "switch (scrollDiv.state.toLowerCase())"                +"\n"+ 
     40        "{"                          +"\n"+ 
     41          "case ('scroll')  :"                  +"\n"+ 
     42            "switch (scrollDiv.direction)"                +"\n"+ 
     43            "{"                      +"\n"+ 
     44              "case ('left')    :"              +"\n"+ 
     45                "scrollx = (--scrollx) % contentWidth"          +"\n"+ 
     46                "break"                  +"\n"+ 
     47              "case ('right')  :"                +"\n"+ 
     48                "scrollx = -contentWidth + (++scrollx) % contentWidth"      +"\n"+ 
     49                "break"                  +"\n"+ 
     50              "case ('up')  :"                +"\n"+ 
     51                "scrolly = (--scrolly) % contentHeight"          +"\n"+ 
     52                "break"                  +"\n"+ 
     53              "case ('down')  :"                +"\n"+ 
     54                "scrolly = -contentHeight + (++scrolly) % contentHeight"    +"\n"+ 
     55                "break"                  +"\n"+ 
     56              "case ('left_up')  :"              +"\n"+ 
     57                "scrollx = (--scrollx) % contentWidth"          +"\n"+ 
     58                "scrolly = (--scrolly) % contentHeight"          +"\n"+ 
     59                "break"                  +"\n"+ 
     60              "case ('left_down')  :"              +"\n"+ 
     61                "scrollx = (--scrollx) % contentWidth"          +"\n"+ 
     62                "scrolly = -contentHeight + (++scrolly) % contentHeight"    +"\n"+ 
     63                "break"                  +"\n"+ 
     64              "case ('right_up')  :"              +"\n"+ 
     65                "scrollx = -contentWidth + (++scrollx) % contentWidth"      +"\n"+ 
     66                "scrolly = (--scrolly) % contentHeight"          +"\n"+ 
     67                "break"                  +"\n"+ 
     68              "case ('right_down')  :"              +"\n"+ 
     69                "scrollx = -contentWidth + (++scrollx) % contentWidth"      +"\n"+ 
     70                "scrolly = -contentHeight + (++scrolly) % contentHeight"    +"\n"+ 
     71                "break"                  +"\n"+ 
     72              "default    :"              +"\n"+ 
     73                "return"                +"\n"+ 
     74            "}"                      +"\n"+ 
     75            "scrollObj.runtimeStyle.left = scrollx"              +"\n"+ 
     76            "scrollObj.runtimeStyle.top = scrolly"              +"\n"+ 
     77            "break"                      +"\n"+ 
     78          "case ('stop')  :"                    +"\n"+ 
     79          "case ('drag')  :"                    +"\n"+ 
     80          "default  :"                    +"\n"+ 
     81            "return"                    +"\n"+ 
     82        "}" 
     83  var contentNode = document.createElement("span") 
     84  contentNode.runtimeStyle.position = "absolute" 
     85  contentNode.runtimeStyle.width = contentWidth 
     86  scrollContent.applyElement(contentNode, "inside") 
     87  for (var i=0; i <= scrollXItems; i++) 
     88  { 
     89    for (var j=0; j <= scrollYItems ; j++) 
     90    { 
     91      if (i+j == 0)  continue 
     92      var tempNode = contentNode.cloneNode(true) 
     93      var contentLeft, contentTop 
     94      scrollContent.insertBefore(tempNode) 
     95      contentLeft = contentWidth * i 
     96      contentTop = contentHeight * j 
     97      tempNode.runtimeStyle.left = contentLeft 
     98      tempNode.runtimeStyle.top = contentTop 
     99    }     
    100  }     
    101  scrollDiv.onpropertychange = function() 
    102  { 
    103    var propertyName = window.event.propertyName 
    104    var propertyValue = eval("this." + propertyName)  
    105    switch(propertyName) 
    106    { 
    107      case "zoom"    : 
    108        var scrollObj = this.children[0] 
    109        scrollObj.runtimeStyle.zoom = propertyValue 
    110        var content_width = scrollObj.children[0].offsetWidth * propertyValue 
    111        var content_height = scrollObj.children[0].offsetHeight * propertyValue 
    112        scrollObj.runtimeStyle.left = -content_width + (scrollObj.runtimeStyle.pixelLeft % content_width) 
    113        scrollObj.runtimeStyle.top = -content_height + (scrollObj.runtimeStyle.pixelTop % content_height) 
    114        break 
    115    }     
    116  }     
    117  scrollDiv.onlosecapture = function() 
    118  { 
    119    this.state = this.tempState ? this.tempState : this.state 
    120    this.runtimeStyle.cursor = "" 
    121    this.removeAttribute("tempState") 
    122    this.removeAttribute("start_x") 
    123    this.removeAttribute("start_y") 
    124    this.removeAttribute("default_left") 
    125    this.removeAttribute("default_top") 
    126  }     
    127  scrollDiv.onmousedown = function() 
    128  { 
    129    if (this.state != "drag")  this.setAttribute("tempState", this.state) 
    130    this.state = "drag" 
    131    this.runtimeStyle.cursor = "default" 
    132    this.setAttribute("start_x", event.clientX) 
    133    this.setAttribute("start_y", event.clientY) 
    134    this.setAttribute("default_left", this.children[0].style.pixelLeft) 
    135    this.setAttribute("default_top", this.children[0].style.pixelTop) 
    136    this.setCapture() 
    137  }     
    138scrollDiv.onmousemove = function() 
    139  { 
    140    if (this.state != "drag")  return 
    141    var scrollx = scrolly = 0 
    142    var zoomValue = this.children[0].style.zoom ? this.children[0].style.zoom : 1 
    143    var content_width = this.children[0].children[0].offsetWidth * zoomValue 
    144    var content_Height = this.children[0].children[0].offsetHeight * zoomValue 
    145    if (this.drag == "horizontal" || this.drag == "both") 
    146    { 
    147      scrollx = this.default_left + event.clientX - this.start_x 
    148      scrollx = -content_width + scrollx % content_width 
    149      this.children[0].runtimeStyle.left = scrollx 
    150    }     
    151    if (this.drag == "vertical" || this.drag == "both") 
    152    { 
    153      scrolly = this.default_top + event.clientY - this.start_y 
    154      scrolly = -content_Height + scrolly % content_Height 
    155      this.children[0].runtimeStyle.top = scrolly 
    156    }     
    157  }     
    158  scrollDiv.onmouseup = function() 
    159  { 
    160    this.releaseCapture() 
    161  }     
    162  
    163  scrollDiv.state = "scroll" 
    164  setInterval(scroll_script, speed ? speed : 20) 
    165}     
    166    </script> 
    167<script language="JScript"> 
    168window.onload = new Function("scroll(document.all['testDiv'], 325)") 
    169    </script> 
    170<br> 
    171<button onclick="testDiv.direction='up'; testDiv.state='scroll'"><span style="font-family: Webdings">5</span>向上</button> 
    172<button onclick="testDiv.direction='left'; testDiv.state='scroll'"><span style="font-family: Webdings">3</span>向左</button> 
    173<button onclick="testDiv.state='stop'"><span style="font-family: Webdings">;</span>停止</button> 
    174<button onclick="testDiv.state='scroll'"><span style="font-family: Webdings">8</span>播放</button> 
    175<button onclick="testDiv.direction='right'; testDiv.state='scroll'"><span style="font-family: Webdings">4</span>向右</button> 
    176<button onclick="testDiv.direction='down'; testDiv.state='scroll'"><span style="font-family: Webdings">6</span>向下</button> 
    177<br> 
    178缩放： 
    179<select onchange="testDiv.zoom = this.options[selectedIndex].value"> 
    180  <option value=1>100%</option> 
    181  <option value=2>200%</option> 
    182  <option value=3>300%</option> 
    183</select>　　　　　 
    184托动范围： 
    185<select onchange="testDiv.drag = this.options[selectedIndex].value"> 
    186  <option value="both">随意</option> 
    187  <option value="horizontal" selected>横向</option> 
    188  <option value="vertical">纵向</option> 
    189</select> 
    190</td></tr> 
    191</table> 
    192</BODY> 
    193</HTML>
    194
  • 相关阅读:
    elasticsearch + kibana　安装
    JSON Web Token
    JConsole和VisualVM远程访问JMX
    DNS域名解析
    Spring Cloud（2）主要组件应用实例
    Docker(三)：Docker入门教程-CentOS Docker 安装
    Spring Cloud（1）相关概念
    Zookeeper实现哨兵机制
    大数据学习笔记之初识Hadoop
    大数据学习笔记之大数据概述
  • 原文地址：https://www.cnblogs.com/yonglianglee/p/1096579.html
Copyright © 2011-2022 走看看