Lewandowski-y-CSDN博客

原创利用JavaScript制作瀑布流

今天看了网上老师关于瀑布流的教程，学习做了一个，效果如下：（1）页面布局：瀑布流的特点是每一个图片块等宽不等高每一个图片块是由三部分包裹组成： 1.一个大的div，className为box，它有内边距padding，用于里面小的div之间的间隔，（用padding不用margin的原因是：js获取数据块的高度时（ offsetHeight）包括图片所在的盒子高度和数据块间的

2016-05-17 16:44:03 896

转载 JS 事件基础创建滚动条

利用拖拽的方法创建一个滚动条 <style> #iparent{ width: 800px; height: 20px; background-color: gray; position: relative; margin: 10px auto; } #div1{ w

2016-03-30 16:20:08 292

原创 JS 事件基础边框拖拽

在拖拽中，使用边框拖拽，即在拖拽开始时，物体的边框先走，等移动停止后，物体在过去： <style> #div1{ width: 200px; height: 200px; background-color: darkorange; position: absolute; } .box{ position: absolute; bord

2016-03-30 11:28:20 2796

原创 JS 事件基础高级拖拽

在js事件拖拽中，为解决IE下拖动的问题，要使用事件捕获 <script> window.onload=function() { var oDiv=document.getElementById('div1'); var disX=0; var disY=0; //封装一个函数用于获取鼠标坐标 function getPos(ev)

2016-03-30 10:28:28 365

转载 JS 事件基础事件绑定函数

封装一个事件绑定函数function myAddEvent(obj,ev,fn){ if(obj.attachEvent) { obj.attachEvent('on'+ev,fn); } else { obj.addEventListener(ev,fn,false); }}

2016-03-28 19:21:35 268

原创 JS 事件基础拖拽

学习笔记：拖拽div要发生三个事件：1.鼠标按下onmousedown; 2.鼠标移动onmousemove; 3.鼠标松开onmouseup;注意事项：（1）要防止div移出可视框，要限制div移动的横纵坐标；（2）防止火狐的bug, 要在最后写上return false，阻止默认事件；（3）防止鼠标运动时移出di

2016-03-28 16:01:54 7432

转载 JS 事件基础跟随鼠标移动

做一个div跟随鼠标移动注意事项：但凡利用到clientX和clientY，一定要加scrollTop和scrollLeft，因为clientX和clientY都是网页可视区坐标，没有加被滚动区间的坐标 <style> #div1{ width: 100px; height: 100px; background-color: pink

2016-03-27 20:02:14 4712

转载 JS 运动框架（3）完美运动框架

完美运动框架function getStyle(obj, name){ if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; }}function start

2016-03-27 15:34:49 334

转载 JS 运动框架2 链式运动

链式运动，在一个运动完成之后，执行函数，开始下一次运动链式运动框架：function getStyle(obj, name){ if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)

2016-03-25 10:16:03 298

转载 JS 运动框架（1）缓冲运动

function getStyle(obj, name){ if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; }}function startMove(ob

2016-03-24 11:34:21 255

转载 JS 运动基础提示栏拉出与隐藏

效果：鼠标移到提示栏，自动拉出提示栏 <style> *{ padding: 0; margin: 0; } #div1{ width: 150px; height: 200px; background-color: orange; position: relativ

2016-03-19 15:55:13 426

转载 JS 利用appendChild对<li>标签进行排序

按照从大到小排序appendChild: 假设父级a中已经有子节点b，那么a.appendChild(b)的作用是：1.先将子节点b从父级a中删除；2.再将子节点b添加到a中，放在最末尾。<body> <button id="bt1">提交</button> <ul id="ul1"> <li>32</li> <li>243</li>

2016-03-18 16:43:57 2975

转载 js封装一个函数用于提取具有相同className的元素

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2016-03-16 14:32:29 943

u010114513的博客