js基础9应用案例
2017-03-15 09:53
549 查看
1. 鼠标拖拽案例 ，js部分掌握
current. onmousedown = function(){
获取当前位置坐标
document.onmousemove = function(){
获取移动位置
move.style.left =
}
}
document.onmouseup = function(){
document.onmousemove = null ; //鼠标弹起时不进行任何操作
}
2. 模拟垂直滚动条 重点理解思路
css布局思路：
.box里面套 .content和.scroll , .scroll里面套.bar ， .box最后设置overflow：hidden
.content 不设置宽width , height : auto ，根据内容调整 ，
.scroll定位到右边，height设置：100% ，
.bar的width设置：100% .bar定位到.scroll里，
/* css中需要有动画效果的必须有定位 */ 重点！！！
js思路：
记住：
1、红色盒子高度计算公式： ①容器的高度 / ②
4000
内容的高度 * ④容器的高度
2、
红色方块移动一像素，我们的内容盒子移动多少呢？
（内容盒子高度 - 大盒子高度） / (大盒子高度 - 红色盒子的高度) 计算倍数
（内容盒子高度 - 大盒子高度） / (大盒子高度 - 红色盒子的高度) * 红色盒子移动的数值
自己代码：重点看
笔记代码：
3. html结构访问法
文档是 document
html body head
document.head
document.body
document.title
没有 document.html 取而代之的是 document.documentElement;
4. scrollTop scrollLeft
scrollTop 被卷去的头部
它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离
应用案例：往下拉，然后停止，吸顶
window.onscroll= function() { 页面滚动语句 }
谷歌浏览器和没有声明 DTD <DOCTYPE >：
document.body.scrollTop;
火狐和其他浏览器
document.documentElement.scrollTop;
ie9+ 和 最新浏览器 都认识
window.pageXOffset; （scrollLeft） pageYOffset （scrollTop）
5. json
var json = {name:"ming", age:10}
console.log(json.name);
console.log(json.age);
6. 封装自己的scrollTop , scrollLeft
使用json的框架逻辑
封装自己的scrollTop scrollLeft
document.compatMode=== "BackCompat"
BackCompat 未声明
CSS1Compat 已经声明<!DOCTYPE html>
注意大小写
谷歌不声明<!DOCTYPE html>
7. scrollLeft scrollTop - 固定导航栏
应用案例：往下拉，然后停止，吸顶
固定导航栏的js代码 重点！！！ 固定定位不占位置，底下的main自动上来
以下三个案例思路
8. 两侧跟随的广告！！！
两侧跟随的广告！！！//[b]scroll().top>0,定时器才开启，定时器一定要放在window.onscroll里面！！！重点看黄色注释[/b]
9. 返回头部小火箭
只要scroll().top > 0 , 就出现小火箭；
点击小火箭时，定时器才开启！！！定时器一定要写在小火箭点击事件里面
页面的移动用window.scrollTo(0,leader);
10 .屏幕滑动效果 重点看黄色注释
Css知识点：要求ul里面的每个li独占一屏，
html,body{
width:
100%;
height:100%;
}
#ul{
width:
100%;
height:100%;
/*position: relative;*//*也可设置*/
}
ulli{
width:
100%;
height:100%;
}
<scriptsrc="my.js"type="text/javascript"></script>
<script>
window.onload=function() {
var ulBox= $("ul");
var ulBoxLi=ulBox.children;
var olBox= $("ol");
var olBoxLi=olBox.children;
var bgColor=["pink","purple","orange","blue","green"];
var leader=0,target=0,timer=null;
for(vari=0;i<ulBoxLi.length;i++)
{
ulBoxLi[i].style.backgroundColor=bgColor[i];
olBoxLi[i].style.backgroundColor=bgColor[i];
olBoxLi[i].index=i; //记录当前的索引号
olBoxLi[i].onclick=function()
{
clearInterval(timer);
target =ulBoxLi[this.index].offsetTop;
// 核心语句 //点击获取当前的offsettop
alert( target); //测试target
timer=setInterval(function()
{
leader =leader+(target-leader)
/10;
window.scrollTo(0,leader);
// 屏幕滑动,//页面移动到target
//相当于pic.style.left= leader + 'px';
},30)
}
}
}
</script>
current. onmousedown = function(){
获取当前位置坐标
document.onmousemove = function(){
获取移动位置
move.style.left =
}
}
document.onmouseup = function(){
document.onmousemove = null ; //鼠标弹起时不进行任何操作
}
<style>
*{margin:0;padding:0;}
.nav{
height:30px;
background: #036663;
border-bottom:1px solid #369;
line-height: 30px;
padding-left:30px;
}
.nav a {
color:#fff;
text-align: center;
font-size:14px;
text-decoration: none;
}
.d-box{
width:400px;
height:300px;
border:5px solid #eee;
box-shadow:2px 2px 2px 2px #666;
position: absolute;
top:50%;
left:50%;
margin-top: -155px;
margin-left:-205px;
}
.hd{
width:100%;
height:25px;
background-color: #7c9299;
border-bottom:1px solid #369;
line-height: 25px;
color:white;
cursor: move;
}
#box_close{
float: right;
cursor: pointer;
}
</style><body> <div class="nav"> <a href="javascript:;" id="register">注册信息</a> </div> <div class="d-box" id="d_box"> <div class="hd" id="drop">注册信息 (可以拖拽) <span id="box_close">【关闭】</span> </div> <div class="bd"></div> </div> </body>
<script>
var box = document.getElementById("d_box");
var drop = document.getElementById("drop");
startdrop(drop,box);//鼠标放在drop上，移动box
function startdrop(current,move){
current.onmousedown = function(event){
var event = event || window.event;
var x = event.clientX - move.offsetLeft -205;
var y = event.clientY - move.offsetTop -155;
document.onmousemove = function(event){
var event = event || window.event;
var a = event.clientX - x ;
var b = event.clientY - y ;
move.style.left = a + "px";
move.style.top = b + "px";
}
}
document.onmouseup = function() { // 鼠标弹起之后， 鼠标继续移动不应该操作
document.onmousemove = null;
}
}
</script>2. 模拟垂直滚动条 重点理解思路
css布局思路：
.box里面套 .content和.scroll , .scroll里面套.bar ， .box最后设置overflow：hidden
.content 不设置宽width , height : auto ，根据内容调整 ，
.scroll定位到右边，height设置：100% ，
.bar的width设置：100% .bar定位到.scroll里，
/* css中需要有动画效果的必须有定位 */ 重点！！！
<style type="text/css">
.box{
width: 300px;
height: 500px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.box .content{ /* 需要有动画效果的必须有定位 */
height: auto;
padding: 5px 18px 5px 5px;
background-color: yellowgreen;
position: absolute;
top: 0;
left: 0;
}
.box .scroll{ /* 需要有动画效果的必须有定位 */
width: 20px;
height: 500px;
position: absolute;
top: 0;
right: 0;
background-color: #eee;
}
.box .scroll .bar{ /* 需要有动画效果的必须有定位 */
width: 100%;
height: 20px;
background-color: red;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
}
</style><body> <div class="box"> <div class="content"> </div> <div class="scroll"> <div class="bar"></div> </div> </div> </body>
js思路：
记住：
1、红色盒子高度计算公式： ①容器的高度 / ②
4000
内容的高度 * ④容器的高度
2、
红色方块移动一像素，我们的内容盒子移动多少呢？
（内容盒子高度 - 大盒子高度） / (大盒子高度 - 红色盒子的高度) 计算倍数
（内容盒子高度 - 大盒子高度） / (大盒子高度 - 红色盒子的高度) * 红色盒子移动的数值
自己代码：重点看
<script type="text/javascript">
window.onload = function(){
//1.获取元素
var box = document.getElementById("box");
var content = box.children[0];
var scroll = box.children[1];
var bar = scroll.children[0];
//2 拖动bar，内容滑动，计算bar的高度
var barHeight = (box.offsetHeight/content.offsetHeight) * scroll.offsetHeight;
bar.style.height = barHeight + "px";
//3. 拖动bar，内容滑动，获取坐标
bar.onmousedown = function(event){
var event = event || window.event;
var y = event.clientY - this.offsetTop; //容易出错，this.offsetTop，bar距离scroll的offsetTop
document.onmousemove = function(event){
var event = event || window.event;
var barTop = event.clientY - y;
var contentTop = (content.offsetHeight - box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight)*barTop;
//alert(contentTop);
if (barTop < 0) {
barTop = 0;
}else if(barTop > scroll.offsetHeight-bar.offsetHeight){
barTop = scroll.offsetHeight- bar.offsetHeight;
}else{
content.style.top = - contentTop + "px";
}
bar.style.top = barTop + "px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖动滑块的时候， 选中文字
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>笔记代码：
<script>
var box = document.getElementById("box"); // 最大的盒子
var content = box.children[0]; // 内容盒子
var scroll = box.children[1]; // 右边盒子
var bar = scroll.children[0];
// 1. 首先先要计算红色滚动条的高度 内容越多，滚动条越短 反之 反之
// 滚动条的长度计算公式: 容器的高度 / 内容的高度 * 容器的高度
// box 是 内容盒子一半 那么红色盒子也要是box盒子的一半
var barHeight = box.offsetHeight / content.offsetHeight * box.offsetHeight;
bar.style.height = barHeight + "px";
// 下面开始 拖动 红色盒子
startScroll(bar,content); // 第一次参数 拖动的 第二个参数 内容的盒子
function startScroll(obj,target) {
obj.onmousedown = function(event) {
// alert(11);
var event = event || window.event;
var t = event.clientY - this.offsetTop ; // 红色盒子距离 父亲 盒子顶部距离
var that = this; // 把 bar 对象给 that 对象
document.onmousemove = function(event) {
var event = event || window.event;
var barTop = event.clientY - t ; // 红色移动的距离
//内容盒子要移动距离
// （内容盒子高度 - 大盒子高度） / (大盒子高度 - 红色盒子的高度) * 红色盒子移动的数值
var contentTop = (target.offsetHeight - target.parentNode.offsetHeight) / (target.parentNode.offsetHeight - that.offsetHeight) * barTop;
// 内容盒子移动的距离
if(barTop < 0)
{
barTop = 0;
}
else if(barTop > target.parentNode.offsetHeight - that.offsetHeight)
// 大于 大盒子的高度 - 红色盒子的高度
{
barTop = target.parentNode.offsetHeight - that.offsetHeight ;
}
else
{
target.style.top = -contentTop + "px"; // 往上走是负值
}
that.style.top = barTop + "px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖动滑块的时候， 选中文字
}
}
document.onmouseup = function() {
document.onmousemove = null;
}
}
</script>3. html结构访问法
文档是 document
html body head
document.head
document.body
document.title
没有 document.html 取而代之的是 document.documentElement;
4. scrollTop scrollLeft
scrollTop 被卷去的头部
它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离
应用案例：往下拉，然后停止，吸顶
怎么得到scrollTop , 重点记住！！
我们学习一个事件： 页面滚动效果window.onscroll= function() { 页面滚动语句 }
谷歌浏览器和没有声明 DTD <DOCTYPE >：
document.body.scrollTop;
火狐和其他浏览器
document.documentElement.scrollTop;
ie9+ 和 最新浏览器 都认识
window.pageXOffset; （scrollLeft） pageYOffset （scrollTop）
<style>
body {
height: 3000px;
}
</style><script>
window.onscroll = function() {
console.log(11);
var scrollTop = window.pageYOffset || document.documentElement.scrollTop
|| document.body.scrollTop || 0;
// document.title = document.body.scrollTop;
document.title = scrollTop;
console.log(scrollTop);
}
</script>5. json
var json = {name:"ming", age:10}
console.log(json.name);
console.log(json.age);
6. 封装自己的scrollTop , scrollLeft
使用json的框架逻辑
封装自己的scrollTop scrollLeft
document.compatMode=== "BackCompat"
BackCompat 未声明
CSS1Compat 已经声明<!DOCTYPE html>
注意大小写
谷歌不声明<!DOCTYPE html>
<style>
body {
height: 3000px;
}
</style><script>
// var json = {left: 10, right: 10} 变异
//json.left json.top
function scroll() {
if(window.pageYOffset != null) // 不等于空，支持ie9+ 和其他浏览器
{
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode == "CSS1Compat") // 声明的了 DTD <!DOCTYPE html>
// 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
{
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 剩下的肯定是怪异模式的
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
window.onscroll = function() {
console.log(scroll().top);
}
</script>7. scrollLeft scrollTop - 固定导航栏
应用案例：往下拉，然后停止，吸顶
固定导航栏的js代码 重点！！！ 固定定位不占位置，底下的main自动上来
<script type="text/javascript">
window.onload = function(){
var nav = $("Q-nav");
var navtop = nav.offsetTop;
alert(navtop);
window.onscroll = function(){
console.log(scroll().top);
if (scroll().top>= navtop) { /*如果scroll().top 大于navtop ，则固定导航栏*/
//alert("到了");
nav.className = "nav fix";
}else{
nav.className = "nav";
}
}
}
</script><style>
*{margin:0;padding:0}
img{
vertical-align: top;
}
.main{
margin:0 auto;
width:1000px;
margin-top:10px;
}
.nav{
}
.fix{ /* 固定nav栏*/
position: fixed;
top: 0;
left: 0;
}
</style><body> <div class="top" id="top"> <img src="images/top.png" alt=""/> </div> <div class="nav" id="Q-nav"> <img src="images/nav.png" alt=""/> </div> <div class="main"> <img src="images/main.png" alt=""/> </div></body>
<script src="my.js" type="text/javascript"></script>
<script type="text/javascript"> window.onload = function(){ var nav = $("Q-nav"); var navtop = nav.offsetTop; alert(navtop); window.onscroll = function(){ console.log(scroll().top); if (scroll().top>= navtop) { /*如果scroll().top 大于navtop ，则固定导航栏*/ //alert("到了"); nav.className = "nav fix"; }else{ nav.className = "nav"; } } } </script>
以下三个案例思路
8. 两侧跟随的广告！！！
两侧跟随的广告！！！//[b]scroll().top>0,定时器才开启，定时器一定要放在window.onscroll里面！！！重点看黄色注释[/b]
<style>
img{
position: absolute;
left:0;
top:50px;
}
#demo{
width:1000px;
margin:0 auto;
}
</style><body> <img src="images/aside.jpg" alt="" id="pic"/> <div id="demo"> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> </div> </body>
<script src="my.js" type="text/javascript"></script>
<script>
window.onload = function() {
var pic = $("pic");
var leader = 0;
var target = 0;
var timer = null; // 定时器
var top = pic.offsetTop; // 50
window.onscroll = function() {
clearInterval(timer);
target = scroll().top + top; // 把最新的 scrolltop 给 target
timer = setInterval(function() { //定时器一定要放在window.onscroll里面
leader = leader + (target - leader ) / 10;
pic.style.top = leader + 'px';
},30)
}
}
</script>9. 返回头部小火箭
只要scroll().top > 0 , 就出现小火箭；
点击小火箭时，定时器才开启！！！定时器一定要写在小火箭点击事件里面
页面的移动用window.scrollTo(0,leader);
<style>
body {
width: 2000px;
}
.top{
position: fixed;
right:50px;
bottom:100px;
display: none;
}
</style><body> <div id="gotop" class="top"> <img src="images/Top.jpg" alt=""/> </div> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p&g d571 t;我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> </body>
<script src="my.js" type="text/javascript"></script>
<script>
window.onload = function() {
var goTop = $("gotop");
window.onscroll = function() {
scroll().top > 0 ? show(goTop) : hide(goTop); // 如果大于0 就显示小火箭 否则隐藏
leader = scroll().top; // 把 卷去的头部 给 起始位置
console.log(scroll().top);
}
var leader = 0,target = 0,timer = null;
// leader 起始位置 target 目标位置
goTop.onclick = function() {
target = 0; // 点击完毕之后 奔向0 去的 不写也可以
timer = setInterval(function() {
leader = leader + (target - leader ) / 10;
window.scrollTo(0,leader); // 去往页面中的某个位置
if(leader == target)//一定在定时器里面
{
clearInterval(timer);
}
},20);
}
}
</script>10 .屏幕滑动效果 重点看黄色注释
Css知识点：要求ul里面的每个li独占一屏，
html,body{
width:
100%;
height:100%;
}
#ul{
width:
100%;
height:100%;
/*position: relative;*//*也可设置*/
}
ulli{
width:
100%;
height:100%;
}
<body> <ul id="ul"> <li>首页</li> <li>关注</li> <li>动态</li> <li>风格</li> <li>作品</li> </ul> <ol id="ol"> <li>首页</li> <li>关注</li> <li>动态</li> <li>风格</li> <li>作品</li> </ol> </body>
<scriptsrc="my.js"type="text/javascript"></script>
<script>
window.onload=function() {
var ulBox= $("ul");
var ulBoxLi=ulBox.children;
var olBox= $("ol");
var olBoxLi=olBox.children;
var bgColor=["pink","purple","orange","blue","green"];
var leader=0,target=0,timer=null;
for(vari=0;i<ulBoxLi.length;i++)
{
ulBoxLi[i].style.backgroundColor=bgColor[i];
olBoxLi[i].style.backgroundColor=bgColor[i];
olBoxLi[i].index=i; //记录当前的索引号
olBoxLi[i].onclick=function()
{
clearInterval(timer);
target =ulBoxLi[this.index].offsetTop;
// 核心语句 //点击获取当前的offsettop
alert( target); //测试target
timer=setInterval(function()
{
leader =leader+(target-leader)
/10;
window.scrollTo(0,leader);
// 屏幕滑动,//页面移动到target
//相当于pic.style.left= leader + 'px';
},30)
}
}
}
</script>
<script src="my.js" type="text/javascript"></script>
<script>
window.onload = function() {
var ulBox = $("ul");
var ulBoxLi = ulBox.children;
var olBox = $("ol");
var olBoxLi = olBox.children;
var bgColor = ["pink","purple","orange","blue","green"];
var leader = 0,target = 0,timer = null;
for(var i= 0; i<ulBoxLi.length; i++)
{
ulBoxLi[i].style.backgroundColor = bgColor[i];
olBoxLi[i].style.backgroundColor = bgColor[i];
olBoxLi[i].index = i; // 记录当前的索引号
olBoxLi[i].onclick = function() {
clearInterval(timer);
target = ulBoxLi[this.index].offsetTop; // 核心语句 //点击获取当前的offsettopalert(target);timer = setInterval(function() { leader = leader + (target - leader ) /10; window.scrollTo(0,leader); // 屏幕滑动,//页面移动到target //pic.style.left = leader + 'px'; },30) } } } </script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js基础2应用案例
- js基础11应用案例
- js基础4-应用案例
- js基础8-应用案例
- js基础3应用案例
- js基础10-应用案例
- js基础5应用案例
- JS-运动基础——案例应用：淡入淡出效果
- js基础1应用案例
- JS脚本的基础应用
- nodeJS+express+Jade写一个局域网聊天应用(node基础)
- UI基础-基础控件-0324-浏览图片案例与改进版(UILabel、UIButton、UIImageView的应用)
- JS零基础一步一步做应用全记录
- Js基础学习和应用
- JS基础——自定义属性的应用1
- postgresql最全整理资料，PostgreSQL 30天 培训视频(SQL基础,备份恢复,HA,服务端编程,大数据,内核,应用案例)
- UI基础-基础控件-0323-几个常用属性的应用-btn小案例
- JS基础——索引值应用2
- C++语言基础 例程 二进制文件应用案例
- 读书笔记_UML基础,案例与应用