javaScript js 可滑动的div块

可以滑动的div块 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>滑动的div</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var i = 0; var step = 2; var timed; var h = 0;//已经滑动的高度 function slide() { timed = setTimeout("slide()", 10); var boxHeight = document.getElementById("oBox").style.height.replace("px","");//外层div的高度 var slideBoxStyle = document.getElementById("slideBox").style; var top = slideBoxStyle.marginTop.replace("px",""); var slideBoxHeight = slideBoxStyle.height.replace("px","");//滑动div的高度 var totalHeight = Number(boxHeight) - Number(slideBoxHeight); h = Number(top) + step; if(i < 50 && h <= totalHeight) { slideBoxStyle.marginTop = h + "px"; i += step; } else { clearTimeout(timed); i = 0; } document.getElementById("show").value = h + ":" + totalHeight; } </script> </head> <body> <div id="oBox" style="width:100px;height:300px;background-color:red;overflow:hidden"> <div id="slideBox" style="width:100px;height:100px;background-color:gray;margin-top:0px"> </div> </div> <input type="button" value="Go..." οnclick="slide()"> <input type="text" id="show"> </body> </html>

转载于:https://www.cnblogs.com/javaTest/archive/2010/07/14/2589413.html

javaScript js 可滑动的div块相关推荐

JavaScript实现心形div块跟随鼠标移动(幻影效果)
JavaScript实现心形div块跟随鼠标移动(幻影效果) 上篇博客讲解了怎样利用JavaScript实现一串div块跟随鼠标指针移动,然后有轩辕问我,想给女朋友做一个好看的可不可以.现在我们来实现 ...
html js 点击隐藏div,javascript实现显示和隐藏div方法汇总
javascript实现显示和隐藏div方法汇总 15种方法实现div显示和隐藏 body{ margin: 0; } h1,h2{ margin: 0; } ul{ margin: 0; paddi ...
JavaScript实现页面滚动到div区域div以动画方式出现
用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...
Banner中利用Jquery隐藏显示下方DIV块
实现方式1: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
JavaScript(js)基础
文章目录一. JavaScript的使用 1.body中的JavaScript 2.head中的JavaScript 3.body中的JavaScript函数 4.head中的JavaScript函 ...
08 JavaScript(js)
JavaScript(js) 一．引言 1. Javascript(js):基于浏览器的,解释型的,面向对象的编程语言2. 编程语言的分类:编译型语言 ---- C C++ (运行效率高,不能跨平台) ...
JavaScript(js)
JavaScript(js):基于对象的,事件驱动的客户端脚本语言,和HTML,CSS一样运行的客户端浏览器中作用:1.用户交互 2.表单验证 3.动态改变页面内容 4.特效 5.游戏基本语法:& ...
点击按钮显示或隐藏Div块
通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换. 代码如下: 方法一: <!DOCTYPE html> <html> <head><script s ...
如何使用JavaScript将数据附加到div？
本文翻译自:How to append data to div using JavaScript? 我正在使用AJAX将数据附加到div元素,我从JavaScript填充div,如何将新数据附加到di ...

javaScript js 可滑动的div块

javaScript js 可滑动的div块相关推荐

最新文章

热门文章