前端应用
1、 .car{
position:absolute
top:0；
left:720px;
}
.box{
position:relative
}
js: hover(函数1，函数2) 模拟光标悬停 进入执行函数1 移除执行函数2
animate()函数 创建自定义动画
duration属性 指定动画持续时间
$(".box").hover(function(){
$(".car").animate({left:0px;},{duration:300});
},function(){
$(".car").animate({left:720px;},{duration:300})
})
2、回到页面指定位置 锚链接
<html>
<head>
</head>
<body>
<div style="height:600px">
<a href="#a1"> 回到第一部分</a>
<a href="#a2"> 回到第二部分</a>
</div>
<div style="width:200px;height:600px;border-style:solid 2px red">
<a name="a1">第一部分
</div>
<div style="width:200px;height:600px;border-style:solid 2px blue">
<a name="a2">第二部分
</div>
<a href="#"> 回到顶部</a>
</body>
</html>
2.1、回到顶部 js交互
DOM 操作
document.getElementById
document.documentElement.scrollTop 滚动条的数值 ，可读写
事件：
window.onload 页面记载完毕后触发
onclick 给按钮绑定
window.onscroll 滚动条滚动时触发
定时器
setInterval() 设置定时器 需要2个参数
clearInterval() 关闭定时器 需要1个 参数
div里面放图片，设置div的宽度等于图片的宽度 1190px;
如何让div居中 margin:0 auto
.btn{
width:40px;
height:40px;
position:fixed;
left:50%;
bottom:30px;
margin-left:600px;
background:red;背景红色
background:url(背景.jpg) no-repeat left top 宽40 高80
}
.btn:hover{
left -40px
}
<javascript>
1、window.onload 页面加载完毕后
var clientHeight=document.documentElement.clientHeight;//获取界面可视区域高度
var isStop=true;
window.onscroll=function(){
//if(滚动条高度>可视区域高度)
{.btn.style.display="block"}
else
{
btn.style.display="none";
}
//一滚动就执行这个事件
if(!isStop)
{
clearInterval(timer);
}
isStop=false;
}
2、获取btn
var timer=null; //定时器变量
3、给按钮添加onclick
onclick=function(){
timer=setInterval(function(
//var osTop=document.documentElement.scrollTop || document.body.scrollTop; //获取滚动条距离顶部高度
/alert(osTop);
var speed=Math.floor(-osTop/5);
//document.documentElement.scrollTop=document.body.scrollTop -=200;
//document.documentElement.scrollTop=document.body.scrollTop = osTop+speed;
isStop=true;
console.log(osTop-speed);// 浏览器后台输出
if(osTop==0)
{
clearInterval(timer);
}
){},30) //30 隔多少秒执行一次
//var osTop=document.documentElement.scrollTop || document.body.scrollTop;
//alert(osTop);
//document.documentElement.scrollTop=document.body.scrollTop -=200px;
}
</javascript>
固定层效果
.wrapper ul * { transition: all linear 0.1; }过渡:给标签添加transition 然后更改属性 就会出现过渡元素不动，其他元素从底下穿过去
纵向信息量较大的网页
设置position值：position:absolute; 此属性值的设置，元素从文档流完全删除。 用绝对定位布局块级元素
absolute和fixed 都是绝对定位
属性取值 偏移量
绝对定位特点 完全脱离文档流 兄弟元素不受影响
2者相同点
完全脱离文档流 为设置偏移量时 都定位在父元素的左上角 元素设置绝对定位就具有偏移属性和堆叠属性
注意:当一个元素脱离后,父元素和后面的子元素重叠,2者取最大的
posted on 2015-07-28 23:50 tongjiahao 阅读(115) 评论(0) 编辑 收藏 举报
