前端学习总结
文章平均质量分 77
LuShengYang
这个作者很懒,什么都没留下…
展开
-
带有缩略图的图片切换效果
效果预览:html部分: > css部分: ul,li{ margin: 0; padding: 0;} li{ list-style: none;} body{ background: #c8ce3原创 2017-07-29 19:24:10 · 1275 阅读 · 0 评论 -
JavaScript判断奇偶数
效果预览:html部分:css部分: #box{ width: 1000px; margin-top: 50px} #box img{ width: 100px; height: 100px; disp原创 2017-07-29 12:45:22 · 5137 阅读 · 0 评论 -
通过for循环和背景定位制作图片的显示效果
html部分:css部分:#wrap{ position: absolute; top: 0; left: 0;} #wrap div{width: 50px; height: 50px; display: inline-block;原创 2017-07-28 20:43:25 · 976 阅读 · 0 评论 -
for循环的简单应用-自动生成div
html部分:css部分: #box{ height: 600px; widows: 600px; border:1px solid black; position: relative;} #box div{height: 50px;原创 2017-07-28 14:40:14 · 12252 阅读 · 1 评论 -
图片的4种轮换方式
html部分: > 图片数量正在加载中... 网页正在加载中...css部分: p{ margin: 0; padding: 0;} body{ text-align: center;} #原创 2017-07-27 18:04:11 · 947 阅读 · 0 评论 -
js模拟手机短信对话
html部分:在下面可以输入要说的话哦~~~ 发送 css部分:h2,ul,img{ margin: 0; padding: 0;} li{ list-style: non转载 2017-07-28 11:21:21 · 1035 阅读 · 0 评论 -
OffsetLeft、offsetTop、offsetWidth、offsetHeight和clientWidth、clientHeight、clientLeft、clientTop的区别:
OffsetLeft:此属性是返回当前元素距离某个父辈元素左边缘的距离,如果父辈元素中有定位的元素,则就返回距离当前元素最近的定位元素边缘的距离;如果父辈元素中没有定位元素,那么就返回相对于body左边缘的距离。(不包括元素的边框和父容器的边框)OffsetTop:返回当前元素距离某个父辈元素上边缘的距离。OffsetWidth:元素内可见区域的宽度+元素边框的宽度(不包括外边距和滚动条部原创 2017-08-12 20:32:37 · 613 阅读 · 0 评论 -
元素的拖拽和通过元素的拖拽模拟滚动条以及碰撞效果
元素拖拽函数的封装:function drag(obj) { obj.onmousedown = function (ev) { var ev = ev || event ; var disX = ev.clientX - this.offsetLeft; var disY = ev.clientY - this.offsetTop;原创 2017-08-12 20:08:06 · 1217 阅读 · 0 评论 -
使用键盘控制元素的移动、大小以及颜色的变化
效果预览:html部分: 使用方向键控制图形的移动; 使用ctrl + “+/-”控制图形的大小; ctrl +1/2/3/4/5/6/7改变div的颜色(共七种颜色); 重置 css部分: .box1{ height:原创 2017-08-11 20:37:52 · 839 阅读 · 0 评论 -
简单模拟select里的多选操作和shift的多选
效果展示:html部分: 单选 北京 上海 广州 杭州 郑州原创 2017-08-11 12:47:17 · 1543 阅读 · 0 评论 -
列表的鼠标按下滚动抬起停止效果
效果预览:html部分:淘宝列表 >>更多 标题 描述 标题 描述 标题 描述原创 2017-07-30 14:53:03 · 287 阅读 · 0 评论 -
图片简单的滑动特效
效果如下:html部分: 前 后 要重新开始么? 谢谢观赏~~~css部分: #pic{ height: 300px; width: 300px; margin: 50px auto;原创 2017-07-29 23:19:51 · 338 阅读 · 0 评论 -
$.Deferred的使用
传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作。这也是造成异步编程困难的主要原因。嵌套式回调:$('ele1').animate({ opacity: '.5'}, 4000, function() { $('ele2').animate({ width: '100px' }, 2000, functi原创 2017-10-10 21:49:32 · 555 阅读 · 0 评论