LuShengYang-CSDN博客

原创 $.Deferred的使用

传统的异步操作会在操作完成之后，使用回调函数传回结果，而回调函数中则包含了后续的工作。这也是造成异步编程困难的主要原因。嵌套式回调：$('ele1').animate({ opacity: '.5'}, 4000, function() { $('ele2').animate({ width: '100px' }, 2000, functi

2017-10-10 21:49:32 529

原创移动端开发时所需加入的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 320

原创移动端获取元素方法和基本事件

移动端选择器：

2017-10-10 15:12:22 1723

原创 OffsetLeft、offsetTop、offsetWidth、offsetHeight和clientWidth、clientHeight、clientLeft、clientTop的区别：

OffsetLeft：此属性是返回当前元素距离某个父辈元素左边缘的距离，如果父辈元素中有定位的元素，则就返回距离当前元素最近的定位元素边缘的距离；如果父辈元素中没有定位元素，那么就返回相对于body左边缘的距离。（不包括元素的边框和父容器的边框）OffsetTop：返回当前元素距离某个父辈元素上边缘的距离。OffsetWidth：元素内可见区域的宽度+元素边框的宽度（不包括外边距和滚动条部

2017-08-12 20:32:37 602

原创元素的拖拽和通过元素的拖拽模拟滚动条以及碰撞效果

元素拖拽函数的封装：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 1185

原创使用键盘控制元素的移动、大小以及颜色的变化

效果预览：html部分：使用方向键控制图形的移动；使用ctrl + “+/-”控制图形的大小； ctrl +1/2/3/4/5/6/7改变div的颜色（共七种颜色）；重置 css部分： .box1{ height:

2017-08-11 20:37:52 826

原创简单模拟select里的多选操作和shift的多选

效果展示：html部分：单选北京上海广州杭州郑州

2017-08-11 12:47:17 1535

原创列表的鼠标按下滚动抬起停止效果

效果预览：html部分：淘宝列表 >>更多标题描述标题描述标题描述

2017-07-30 14:53:03 280

原创图片简单的滑动特效

效果如下:html部分：前后要重新开始么？谢谢观赏～～～css部分： #pic{ height: 300px; width: 300px; margin: 50px auto;

2017-07-29 23:19:51 327

原创带有缩略图的图片切换效果

效果预览：html部分： > css部分： ul,li{ margin: 0; padding: 0;} li{ list-style: none;} body{ background: #c8ce3

2017-07-29 19:24:10 1254

原创 JavaScript判断奇偶数

效果预览：html部分：css部分： #box{ width: 1000px; margin-top: 50px} #box img{ width: 100px; height: 100px; disp

2017-07-29 12:45:22 5103

原创通过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 965

原创 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 12197 1

转载 js模拟手机短信对话

html部分：在下面可以输入要说的话哦~~~ 发送 css部分：h2,ul,img{ margin: 0; padding: 0;} li{ list-style: non

2017-07-28 11:21:21 1020

原创图片的4种轮换方式

html部分： > 图片数量正在加载中... 网页正在加载中...css部分： p{ margin: 0; padding: 0;} body{ text-align: center;} #

2017-07-27 18:04:11 904

Lu sheng yang的博客