例题三、图片轮播

<body>

<div style="width:1000px; height:250px; margin-top:30px">

　　<img src="img/11.jpg" width="1000" height="250" />

　　<img src="img/22.png" width="1000" height="250" style="display:none" />

　　<img src="img/33.png" width="1000" height="250" style="display:none" />

　　<img src="img/44.png" width="1000" height="250" style="display:none" />

</div>

</body>

<script type="text/javascript">

window.setInterval("Huan()",2000);

//找到图片的最大索引

var n = document.getElementsByTagName("img").length-1;

//存当前图片的索引

var d =0;

//换图

function Huan()

{

　　var attr = document.getElementsByTagName("img");//找到所有图片

　　d++;//当前索引加1

　　if(d>n)//判断索引是否超出范围

　　{

　　　　d = 0;

　　}

　　for(var i=0;i<=n;i++)//换图

　　{

　　　　attr[i].style.display = "none";//让所有隐藏

　　}

　　attr[d].style.display = "block";//让该索引的显示

}

</script>

例题四、选项卡效果

<style type="text/css">

*{ margin:0px auto; padding:0px}

#menu{ width:240px; height:30px;}

.list{ width:60px; height:30px; float:left; text-align:center; line-height:30px; vertical-align:middle;}

.list:hover{ cursor: pointer}

.nr{ width:240px; height:200px; text-align:center; line-height:200px; vertical-align:middle}

</style>

</head>

<body>

<div style="width:700px; height:500px; margin-top:30px">

　　<div id="menu">

　　　　<div class="list" style="background-color:#0F0" onclick="Show('d1')">娱乐</div>

　　　　<div class="list" style="background-color:#369" onclick="Show('d2')">社会</div>

　　　　<div class="list" style="background-color:#F60" onclick="Show('d3')">体育</div>

　　　　<div class="list" style="background-color:#CC3" onclick="Show('d4')">军事</div>

　　</div>

　　<div id="d1" class="nr" style="background-color:#3C0">娱乐新闻</div>

　　<div id="d2" class="nr" style="background-color:#399; display:none">社会新闻</div> //隐藏

　　<div id="d3" class="nr" style="background-color:#F30; display:none">体育新闻</div> //隐藏

　　<div id="d4" class="nr" style="background-color:#CF3; display:none">军事新闻</div> //隐藏

</div>

</body>

<script type="text/javascript">

function Show(id)//鼠标点击执行

{

　　var attr = document.getElementsByClassName("nr");//隐藏所有

　　for(var i=0;i<attr.length;i++)

　　{

　　　　attr[i].style.display = "none";

　　}

　　document.getElementById(id).style.display = "block";//显示当前的

}

</script>

五、滑动效果

<style type="text/css">

*{ margin:0px auto; padding:0px}

#left{ height:600px; background-color:#63C; float:left}

#right{ height:600px; background-color:#F33; float:left}

#btn{ width:30px; height:30px; background-color:#FFF; position:relative; top:285px; color:#60F; font-weight:bold; text-align:center; line-height:30px; vertical-align:middle; float:left}

#btn:hover{ cursor:pointer}

</style>

</head>

<body>

<div style="width:1000px; height:600px">

　　<div id="left" style="width:200px;">

　　<div id="btn" onclick="Bian()" style="left:185px;">-></div>

</div>

<div id="right" style="width:800px;"></div>

</body>

<script type="text/javascript">

function Bian()//点击->时执行Bian循环

{

　　Dong();//执行Dong循环

}

function Dong()//循环dong的作用是改变大小和位置

{

　　var d1 = document.getElementById("left");//找到id为left的元素

　　var d2 = document.getElementById("right");

　　var btn = document.getElementById("btn");

　　//左侧DIV变宽

　　var yskd1 = d1.style.width;

　　var w1 = yskd1.substr(0,yskd1.length-2);

　　var w1 = parseInt(w1)+2;

　　d1.style.width = w1+"px";

　　//右侧DIV变窄

　　var yskd2 = d2.style.width;

　　var w2 = yskd2.substr(0,yskd2.length-2);

　　var w2 = parseInt(w2)-2;

　　d2.style.width = w2+"px";

　　//将按钮移动

　　var ysjl = btn.style.left;

　　var w3 = ysjl.substr(0,ysjl.length-2);

　　var w3 = parseInt(w3)+2;

　　btn.style.left = w3+"px";

　　if(w2>200)

　　{

　　　　//自己调自己

　　　　window.setTimeout("Dong()",1);

　　}

}

</script>

例题六、进度条的制作

<style type="text/css">

*{ margin:0px auto; padding:0px}

#wai{ width:200px; height:10px; border:1px solid #60F;}

#nei{ width:0px; height:10px; background-color:#F33; float:left}

</style>

</head>

<body>

<div style="width:600px; height:300px; margin-top:30px">

　　<div id="wai"></div>

　　<div id="nei"></div>

<input type="button" value="开始" onclick="Start()" />

</div>

</body>

<script type="text/javascript">

function Start()

{

　　Bian();

}

var bfb = 0;

function Bian()

{

　　//将百分比变化

　　bfb= bfb+1;

　　//改变宽度

　　document.getElementById("nei").style.width = bfb+"%";

　　//判断

　　if(bfb<100)

　　{

　　　　window.setTimeout("Bian()",50);

　　}

}

</script>

JS之document例题讲解2的更多相关文章

  1. JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  2. JS function document.onclick(){}报错Syntax error on token "function", delete this token

    JS function document.onclick(){}报错Syntax error on token "function", delete this token func ...

  3. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  4. JS 中document.URL 和 window.location.href 的区别

    实际上,document 和 window 这两个对象的区别已经包含了这个问题的答案. document 表示的是一个文档对象,window 表示一个窗口对象. 一个窗口下面可以有很多的documen ...

  5. 原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题

    document.getElementsByClassName在ie8及其以下浏览器的兼容性问题,在ie8及其以下浏览器中不能使用,针对这个问题,下面给出详细的解决方法,感兴趣的朋友可以参考下     ...

  6. JS中的DOM对象及JS对document对像的操作

    DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...

  7. JS的document.links函数使用示例

    ? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g ...

  8. JS的document.images函数使用示例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JS的document.anchors函数使用示例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 无法启动此程序，因为计算机中丢失 zlibd.dll【OSG】

    在配置OSG的过程中遇到了这个问题.记录一下. zlibd.dll这个DLL可以在第三方库3rdParty里面找到.找到之后复制到OSG的bin目录下即可.

  2. lol人物模型提取（四）

      在淘宝上联系了一个3d打印服务的卖家,他要我转成stl.obj.xt.xst.igs任意一种格式给他发过去,我就把它转成了obj格式给他发过去了.   然后他那边打开是这样的,没有贴图,看上去模型 ...

  3. DAY1敏捷冲刺

    站立式会议 工作安排 (1)服务器配置 (2)数据库建表 (3)页面初步样式设计 (4)主要页面之间的交互 燃尽图 代码提交记录 感想 林一心:后端云服务器的配置确实是一个挑战,目前还在摸索中 赵意: ...

  4. vuex介绍--一篇看懂vuejs的状态管理神器

    原文,请点击此链接http://www.ituring.com.cn/article/273487

  5. C#常见函数

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. VS05错误：部署WEB文件失败

    直接生成一个空项目就不存在这个问题了.

  7. 关于c++中public & private方法调用问题

    class IDNoIdentifier { public: IDNoIdentifier(); ~IDNoIdentifier(); typedef vector<cv::Rect> C ...

  8. bzoj1086-王室联邦

    题目 给出一棵树,求一种分块方案,使得每个块的大小\(size\in [B,3B]\).每个块还要选一个省会,省会可以在块外,但是省会到块内任何一个点路径上的所有除了省会的点都必须属于这个块.\(n\ ...

  9. 【bzoj1609】[Usaco2008 Feb]Eating Together麻烦的聚餐 dp

    题目描述 为了避免餐厅过分拥挤,FJ要求奶牛们分3批就餐.每天晚饭前,奶牛们都会在餐厅前排队入内,按FJ的设想所有第3批就餐的奶牛排在队尾,队伍的前端由设定为第1批就餐的奶牛占据,中间的位置就归第2批 ...

  10. JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想. 面向对象可以把程序中的关键模块都视为对象, 而模块拥有属性及方法. 这样如果我们把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.   工厂 ...