- 博客(15)
- 收藏
- 关注
原创 $.Deferred的使用
传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作。这也是造成异步编程困难的主要原因。嵌套式回调:$('ele1').animate({ opacity: '.5'}, 4000, function() { $('ele2').animate({ width: '100px' }, 2000, functi
2017-10-10 21:49:32
621
原创 移动端开发时所需加入的3个meta标签和网页的各种宽高
一、3个常用的meta标签1. 如果IE浏览器安装了GCF(chrome插件),则使用GCF来渲染页面,如果未安装GCF,则使用最高版本的IE内核进行渲染。2.meta name="format-detection" content="telephone=false"格式化探索,防止iphone6将数字2016解析为电话号码 3.视口,设置视口宽度等于设备宽度;设置初始缩放、最小缩
2017-10-10 15:34:06
374
原创 OffsetLeft、offsetTop、offsetWidth、offsetHeight和clientWidth、clientHeight、clientLeft、clientTop的区别:
OffsetLeft:此属性是返回当前元素距离某个父辈元素左边缘的距离,如果父辈元素中有定位的元素,则就返回距离当前元素最近的定位元素边缘的距离;如果父辈元素中没有定位元素,那么就返回相对于body左边缘的距离。(不包括元素的边框和父容器的边框)OffsetTop:返回当前元素距离某个父辈元素上边缘的距离。OffsetWidth:元素内可见区域的宽度+元素边框的宽度(不包括外边距和滚动条部
2017-08-12 20:32:37
645
原创 元素的拖拽和通过元素的拖拽模拟滚动条以及碰撞效果
元素拖拽函数的封装: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
1239
原创 使用键盘控制元素的移动、大小以及颜色的变化
效果预览:html部分: 使用方向键控制图形的移动; 使用ctrl + “+/-”控制图形的大小; ctrl +1/2/3/4/5/6/7改变div的颜色(共七种颜色); 重置 css部分: .box1{ height:
2017-08-11 20:37:52
865
原创 图片简单的滑动特效
效果如下:html部分: 前 后 要重新开始么? 谢谢观赏~~~css部分: #pic{ height: 300px; width: 300px; margin: 50px auto;
2017-07-29 23:19:51
356
原创 带有缩略图的图片切换效果
效果预览:html部分: > css部分: ul,li{ margin: 0; padding: 0;} li{ list-style: none;} body{ background: #c8ce3
2017-07-29 19:24:10
1304
原创 JavaScript判断奇偶数
效果预览:html部分:css部分: #box{ width: 1000px; margin-top: 50px} #box img{ width: 100px; height: 100px; disp
2017-07-29 12:45:22
5190
原创 通过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
1002
原创 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
12319
1
转载 js模拟手机短信对话
html部分:在下面可以输入要说的话哦~~~ 发送 css部分:h2,ul,img{ margin: 0; padding: 0;} li{ list-style: non
2017-07-28 11:21:21
1068
原创 图片的4种轮换方式
html部分: > 图片数量正在加载中... 网页正在加载中...css部分: p{ margin: 0; padding: 0;} body{ text-align: center;} #
2017-07-27 18:04:11
1011
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人