dom
@@九亿少女的梦
国家尚未富强,儿女怎能情长?放下儿女情长,一心建设祖国大好河山
展开
-
拖动模态框
基础的样式不写,写的主要是 ‘拖动’ 这个效果的代码案例分析:点击弹出层,模态框和遮挡层就会显示出来display:block;点击关闭按钮,模态框和遮挡层就会关闭出来display:none;在液面中拖拽的原理: 鼠标按下并且移动之后,松开鼠标。触发事件是鼠标按下mousedown,鼠标移动mousemove, 鼠标松开mouseup。在脱液过程中鼠标获得最新的值给模态框的Top值和left值。这样模态框就可以跟着鼠标走。用鼠标的坐标减去鼠标在盒子内部的坐标。才是模态框真正的位置。第1步.原创 2022-01-22 15:35:55 · 530 阅读 · 0 评论 -
前端中的注册事件(绑定事件)的两种方式
传统注册事件 var lis = document.querySelector('li'); lis[0].onclick = function(){ alert('hi'); } lis[0].onclick = function(){ alert('how a u'); } //只能显示下面那个,具有唯一性 lis[1].addEventListener('click',function(){ alert(22);} ) lis原创 2022-01-16 22:33:42 · 350 阅读 · 0 评论 -
dom中的事件操作
鼠标事件原创 2022-01-16 14:48:31 · 136 阅读 · 1 评论 -
创建和添加节点
这个东西的用途就是用来写留言和评论的首先要创建节点元素;<script> var li = document.creatElement('li');</script>然后就是添加节点; //添加节点,node.appendChild(child) node 是父级,child是子级 var ul = document.querySelector('ul'); ul appendChild(li);添加节点,法2 //原创 2022-01-15 23:03:40 · 469 阅读 · 0 评论 -
下拉菜单的制作
如上图的b站鼠标放在上面,会有下拉菜单出现只写个script的大概,样式啥的还得你们慢慢来每一个都用li来放,li里面用a标签来放链接,下面放一个ul下拉菜单具体如下图//这里还有很多其他的东西没写.nav>li>a:hover{background-color:#eee;}.nav ul{ display:none; }<ul class ="nav"> <li> <a herf="#">登录</a> &..原创 2022-01-15 21:23:46 · 264 阅读 · 0 评论 -
tab栏切换(重点案例)
tab栏如下图具体情况如上先分好结构代码部分:<style>.item { display :none;}.tabtop li{ float:left; height:39px; padding:0 20px; text-align:center; cursor:pointer; }.item_info{ padding:20px 0 0 20px;}.item{display:none;}.tabtop .cur原创 2022-01-15 16:32:51 · 574 阅读 · 0 评论 -
背景皮肤更换效果
如上图所示,下面那个点点,会滑动,然后那个图片会自动切换我们可以简易的搞一个类似的,原理都一样那些点点可以用ul框起来,用li来表示,每个li里面装一个img,<style>body{ background: url(地址)no-repeat center top;}li{ list-style:none;}.pifu{overflow: hidden; margin:100px auto; bakground-color:#fff; width:410px; .原创 2022-01-14 17:57:57 · 128 阅读 · 0 评论 -
getElementByld()方法获取元素
DOM中getElementById方法获取元素等等原创 2022-01-12 22:43:15 · 1603 阅读 · 0 评论