admin管理员组文章数量:1619183
效果网站： 点击我跳转.
position中的值
| 值 | 描述 |
|---|---|
| absolute（绝对定位） | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| fixed（固定定位） | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| relative（相对定位） | 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
采用position定位之后必须采用偏移属性定义偏移量，也就是相对包含块的偏移。注意应用于position值不是static的元素。
有时也需要定义width和heigth，但是可能会和偏移属性的定义冲突，因为四个偏移属性实际上已经定义了元素的大小。此时，根据width和left属性定义左右，根据top和height属性定义上下。
内容溢出overflow: visible/ hidden/ scroll /auto/ inherit，初始值是visible。
一个元素的大小固定，但是其内容放不下，就会导致溢出。overflow控制溢出部分的可见(visible)、不可见(hidden)、滚动可见(scroll)。
元素可见性visibility: visible/ hidden/ collapse/ inherit，初始值是visible。
visibility:hidden和display:none的区别：visibility:hidden设置元素不可见，但是元素依旧会影响布局，只是元素部分呈现为空白;display:none元素不显示并且从文档流中删除，对文档布局没有任何影响。
在做菜单鼠标浮动上去 会展示更多效果的时候 可以使用jquery来实现
// 鼠标移入id=menu_li_two的节点时,执行function中的代码功能
$("#menu_li_two").mouseover(function(){
// 滑出窗帘
$("#header_sunblind").slideDown(200);
});
// 鼠标移出id=header_sunblind的节点时,执行function中的代码功能
$("#header_sunblind").mouseleave(function(){
$("#header_sunblind").hide(); // 隐藏窗帘
});
效果像这样
但是这样写会有逻辑错误
我们是设置的是 鼠标移入id=menu_li_two的节点时,执行function中的代码功能 然后显示隐藏的菜单
但是我们隐藏却是鼠标移出菜单 在期间 我们的鼠标没有 放到菜单的话 就获取不到菜单 导致没有办法隐藏
所以我觉得应该写一个定时器 或者其他办法判断一下
然后再做这个的时候
我觉得简单的html5虽然可以实现 但是如果页面大小发生改变 这个展示就会错位
所以我用了js来实现
//获取元素相对与浏览器窗口的X位置
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
//获取元素相对与浏览器窗口的Y位置
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
有了这俩个函数就能简单的获取元素的位置
然后只需要将二维码的位置和这个元素的位置绑定就行了
setInterval(function(){
if (parseInt(head_phone_hover.style.left) !=(getLeft(menu_phone_btn) - 95)) {
head_phone_hover.style.left = (getLeft(menu_phone_btn) - 95) + "px";
}
if (parseInt(head_user_hover.style.left) !=(getLeft(user_info) - 20)) {
head_user_hover.style.left = (getLeft(user_info)-20) + "px";
}
},10);
我用了定时器来检查这个的位置是否发生改变 改变了就一起移动
可以看到即使我缩放了他还是再图标下面
版权声明：本文标题：HTML学习（仿做LOL官网头部导航） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1728793321a1173927.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论