JS-DOM:基础实操---固定区域的scrollLeft滚动

<style type="text/css">
#wrap{
    height: 200px;
    width: 200px;
    border: 5px solid yellow;
    overflow: hidden;
}
#child{
    height: 500px;
    width: 500px;
    background-color: #ccc;
}
</style>

<script>

window.onload=function(){

  oWrap=document.getElementById("wrap");

  var start=0;

  var timer=setInterval(function(){

    start++;

    if(start>=200){

      clearInterval(timer);

    }

    oWrap.scrollLeft=start;

  },30);

}

</script>

<div id="wrap">
    <div id="child">的撒发实得分撒的发生的飞实得分撒的发生的飞实得分撒的发生的飞实得分撒的发生的飞谁的发生的发生的水电费的撒发实得分撒的发生的飞实得分撒的发生的飞实得分撒的发生的飞实得分撒的发生的飞谁的发生的发生的水电费的撒发实得分撒的发生的飞实得分撒的发生的飞实得分撒的发生的飞实得分撒的发生的飞谁的发生的发生的水电费的撒发实得分撒的发生的飞实得分撒的发生的飞实得分撒的发生的飞实得分撒的发生的飞谁的发生的发生的水电费</div>
</div>

JS-DOM:基础实操---固定区域的scrollLeft滚动

时间: 2024-10-09 03:57:01

JS-DOM:基础实操---固定区域的scrollLeft滚动的相关文章

JS-DOM:基础实操---以“对联”方式固定在页面

主要见于:天猫主页右侧的固定栏.京东主页右侧固定栏 方法一: CSS部分: <style type="text/css">body{    height: 3000px;}#div1{    width: 50px;    height: 150px;    background-color: #ccc;    position: absolute;    right: 0;    /*top: 50%;*/    /*margin-top: -75px;*/}</s

JS-DOM:基础实操---点击回到顶部

CSS部分 <style type="text/css">body{    height: 3000px;}#div1{    height: 100px;    width: 100px;    background-color: #ccc;    position: fixed;    right: 0;    bottom: 0;}    </style> HTML部分 <body><div id="div1">

JS-DOM:基础实操---瀑布流排版

CSS部分 <style type="text/css">#wrap{    width: 980px;    margin: 0 auto;    border: 1px solid blue;}#wrap ul{    width: 250px;    margin: 10px;    border: 1px solid #ccc;    float: left;    padding: 0;}#wrap ul li{    width: 248px;    list-

JS-DOM:基础实操---模仿新浪微博的发布

CSS部分 <style>* { padding: 0; margin: 0; }li { list-style: none; }body { background: #f9f9f9; font-size: 14px; } #box { width: 450px; padding: 10px; border: 1px solid #ccc; background: #f4f4f4; margin: 10px auto; }#fill_in { margin-bottom: 10px; }#fi

Docker 学习笔记【3】 Docker 仓库、数据卷、数据卷容器,网络基础实操。高级网络配置学习

Docker 学习笔记[4] 高级网络配置实操,实战案例实验 =========================================================================== Docker 学习笔记[2] Docker 仓库实操,创建私有仓库,实操数据卷.数据卷容器,记录开始 =========================================================================== 被格式化的脚本内容: #开头代表

JS DOM基础 操作属性、类、CSS样式

操作属性和类 一.属性节点操作 文本节点内容的获取和修改: 语法:elementNode.attributeName ( 元素节点.属性名)     也可以使用“[ ]” ( 元素节点[属性名]) 注意:一般我们操作属性节点时是不需要获取属性节点的,而是直接通过元素节点获取(/修改)属性节点的值.      特别的,有些属性名称与js关键字或者保留字冲突了,只能用另外的名字: class属性:要写成className(class是关键字). label标签的for属性:写成htmlFor. 通过

JS DOM基础 事件概述 事件流 事件处理方法 添加监听器 事件类型 事件对象 事件委托

一.事件概述 事件是什么? 在我们的生活中,都会接触到事件这样一个概念,它通常通过描述发生这件事的时间.地点.人物,发生了什么来进行概括. 同样的在javascript也有这样的一个的东西------事件. 页面上发生的事件:鼠标移动.点击.滚动等等. 事件描述了页面上发生的事情,通常它有以下三个要素组成: 事件源:触发事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序(事件监听器):事件触发后要执行的代码(函数形式) Javascript 使我们可以动态的去操作一个页

javascript(js)基础 dom基础(js语法)未来会删除此博客

<script> //文档中第三个图像:document.images[2] //文档中名为'aa'的表单:document.form['aa'] //层只有唯一 的id:document.layers[id] //微软的层id:docment.all[id] //如果想找到id的left位置并把它赋值给变量bs,在其他浏览器中是这样操作的:document.layers[id].left; //统一标准的dom是这样的:bs=document.getElementByid(id).style

【JS学习笔记】DOM基础-字节点,父节点

一.DOM基础 (1)什么是DOM?DOM,即document,是用来操作页面上的元素,比如操作div获取,修改样式等.是JS的组成部分,还是一套规范. (2)浏览器的支持情况 现在主流的浏览器有3种,分别是IE,Chrome,Firefox. IE:在IE6-8版本中,对DOM的支持差不多是百分之十几差不多了,但是到了IE9就有了质的飞跃. Chrome:介于两者之间,在60%左右,对DOM支持的不是那么的好也不是那么的差. Firefox:对于DOM的支持几乎可以用99%来形容. 二.DOM