- 博客(41)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 使用echarts和百度地图经纬度绘制地图
以下是我的代码 --> .container{margin-top:100px;} search var token='XIxs9YC0wXa86WfWQGBM89qyohwGoXkx'; var url="http://api.m
2017-03-29 15:48:04
9050
原创 js实现尖角动画菜单
今天做了一个二级菜单，主要运营了js的定时器和高度属性以及遍历。代码贴出来，希望对大家有帮助了！ .top-nav { font-size: 14px; font-weight: bold; list-style: none; } .to
2017-03-28 14:18:18
656
原创 纯js三级联动菜单
今天用js做了一个三级联动菜单，发现这种东西还是蛮费脑力的，要被这个对象给搞蒙了！以下是我分享出来的代码，希望对大家有帮助！ 三级联动菜单 ==请选择省份== ==请选择城市== ==请选择区域== var array=[ {name:'湖南省',cities:[{name:'长沙市',count
2017-03-16 20:54:50
1483
转载 JavaScript中的this到底指的是什么！
对于常年使用C++,C#,Java等这些面向对象语言的程序员来说，几乎天天都和this打交道。在这些语言里，this含义非常明确，就是指向当前的对象实例，我们用起来也是相当的放心。然而，到了JavaScript这个动态语言里，this的写法没变，但是其含义却大大地不同了，下面用实例说明，使用浏览器为Firefox14.0.1.例子一：（1）源码[html]
2017-03-07 10:31:32
1579
转载 css清除浮动方法大全
CSS清除浮动是每一位web前端工程师都要掌握的技术，也是让每一位刚入门的前端工程师感到头疼的问题，下面就来讲一下CSS清除浮动的原理和各种解决方法，大家可以根据实际情况选择最佳的解决方案。在用DIV+CSS布局时通常都会用到浮动（float）来完成页面布局，浮动（float）会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及
2017-03-06 14:47:47
456
转载 jQuery.extend()与jQuery.fn.extend()区别和用法解释
区别和详解：jQuery extend()和jQuery.fn.extend()1、认识jQuery extend()和jQuery.fn.extend()jQuery的API手册中，extend方法挂载在jQuery和jQuery.fn两个不同对象上方法，但在jQuery内部代码实现的是相同的，只是功能却不太一样；且看官方给出解释：jQuery.extend(): Mer
2017-03-06 14:02:15
307
转载 js Math.cos()与Math.sin()
JS Math.sin() 与 Math.cos() 用法Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之间；Math.cos(x) x 的余弦值。返回的是 -1.0 到 1.0 之间的数；这两个函数中的X 都是指的“弧度”而非“角度”，弧度的计算公式为： 2*PI/360*角度；30° 角度 的弧度 = 2*PI/360*30
2017-02-14 16:50:07
1413
原创 canvas绘制五角星
canvas绘制五角星代码如下： 五角星绘制 var star=document.getElementById('star'); var ctx=star.getContext('2d'); star.width=800; star.height=800; var R=300; var r=150; ctx.lineWidth=10;
2017-01-20 17:10:46
987
原创 canvas绘制七巧板
今天来学下canvas，难度：1星；题目：canvas绘制七巧板代码如下： 七巧板绘制 var tangram=[ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"}, {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67bec
2017-01-18 15:04:56
1436
原创 css sprite网页图片处理之小图标切换
css sprite以前我们经常用css sprite做小图标切换CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
2017-01-10 14:13:07
777
原创 css3 3D特效
在学习css3的时候，发现最难得应该是这个3d特效啊，整了我好久都没搞清楚这其中的设置是如何弄得~是我想象力不行呢还是咋呢~接下来传上我写的代码，希望大家帮我分析分析为何要这样设置样式~ translateZ用法 *{margin:0;padding:0;} .light{margin-top: 200px;margin-left:200px;width:310px;he
2016-12-23 08:56:17
355
原创 jquery 的addClass方法函数使用
jquery 的addClass怎么用！ .left, .right { width: 300px; height: 120px; } .left div, .right div { width: 100px; height: 90px;
2016-12-20 09:47:55
1835
原创 图片特效展示（鼠标移入移除特效）
太久没动手了，又断续复习一些以前学过的东西。今天我写的是一个图片展示特效。鼠标onmouseover图片的时候，介绍缓慢出现；移除时候介绍回到原位。代码如下： 图片展示特效 *{margin:0;padding: 0;} #picList{width:1300px;margin:100px auto;}
2016-12-19 14:44:12
2262
原创 仿照（小米官网首页轮播图）特效js代码
最近跟轮播图杠上了，以前也接触过这个轮播图的写法，但是一般都是用插件，久而久之就忘记了！昨晚有学习了一下自己写这个js，虽然是依靠零散的记忆写出来的，可能自己并未真正理解吧！！！以下是我写的代码： 小米官网轮播图仿照 .container{width: 1226px;height: 460px;margin:0 auto;position: relative;} .conta
2016-11-26 10:09:51
6933
原创 angularJS $interval如何显示时间
每天进步一点点！！！第一次接触angularJS的时候只会跟着上面的去写，也不晓得怎么结合js去写，今天试了试，做一个简单的时间显示效果。代码如下： $timeout 用法 {{header}} {{mm}} var app=angular.module('myapp', []); app.controller('myctrl', function($
2016-11-25 16:35:53
1348
原创 qq相册图片轮播js代码
温故而知新，可以为师矣。还是坚持每天学习一点点进步一点点！昨天学习了下QQ相册图片播放的特效。今天花了点时间写了下代码，希望对大家有帮助！ qq相册图片切换 *{margin:0;padding: 0;} .container{margin:20px auto; width:600px;} .container ul li{list-style:none; width
2016-11-25 08:58:20
980
原创 angular [ng-class和ng-model]配对使用，切换背景颜色
慢慢开始研究下js相关的一些框架，比如说angular.js.第一个学习的是ng-class实现切换背景颜色，代码如下： ng-class类选择 .lightblue{width: 200px;height: 300px;background-color: lightblue;} .red{width: 200px;height: 300px;background-col
2016-11-23 17:21:01
6162
原创 $.each(index,el)方法使用（jQuery）
现在接触这些东西越来越少，很多东西似乎都忘记了。今天又重新翻起来看了遍，想在博客留下一个我学习过这个知识的痕迹。现在要分享的这个知识点是jQuery中的$.each(index,el)方法、//index代表索引，el代表当前这个元素（this）。 each方法 $(function(){ $('li').each(function(index,el){
2016-11-23 16:20:29
8183
1
原创 如何用Math.max.apply()获取数组最大/小值
最近似乎对JavaScript有点兴趣了~~~打算好好钻研这个东西。可是，一开始就遇到问题了！！！Math.min.apply(obj,args);//这个obj对象将代替Function类里this对象，第二个传进来的是数组Math.max.apply(obj,parms);//这个obj对象将代替Function类里this对象，第二个传进来的是参数Math.min()虽然能取到最
2016-11-23 15:41:16
23298
原创 瀑布流布局html+css+js分享
很久没上这个博客了，刚入行三四个月，很多东西都不懂，在公司也没多少项目可做，更多的是在做简单的维护工作，有时候，我都在怀疑自己以后是不是真的会继续在这行做下去？有的时候甚至想放弃，感觉自己有太多的东西不懂，在学的过程中断断续续，毅力不够！不知道是兴趣所驱使还是什么，我还是决定一步步慢慢来，相信自己以后会找到更好的平台去做好这个工作！废话不多说了，今天就来和大家分享一个最近刚学的瀑布流布局。以下
2016-11-22 15:35:16
1138
原创 多物体缓冲运动js代码大全
奉上我的代码！！兼容ie和Firefox 多物体运动 ul li{list-style:none;margin:10px;width: 200px;height: 200px;background-color: green;} var lis=document.getElementsByTagName('li'); for(
2016-09-27 15:00:50
369
原创 刷新页面随机改变某段落的文字（js代码）
今天来介绍一下刷新页面时候触发的随机事件（每当刷新一次页面，该段文字随机改变一次）代码如下（兼容ie，Firefox） Document var says=['明日复明日明日何其多','我生待明日万事成蹉跎','少壮不努力，老大徒伤悲','宝剑锋从磨砺出，梅花香自苦寒来','吃得苦中苦，方为人上人']; var timer=null; var say=docume
2016-09-22 10:51:38
5384
原创 简单抽奖活动js代码
代码如下：（兼容Firefox和ie） Document .wrapper{width:600px;margin:0 auto;text-align: center;} .start {padding: 30px; font:36px '微软雅黑';color:#f00;} .btns span{display: inline-block;width: 220px;h
2016-09-22 09:54:28
3257
原创 radio单选框效果代码（css3）
Document .radio-2{width:900px;margin:100px auto; background-color: #f0f;padding:10% 0%;text-align: center;} .radio-2 [type="radio"]{display: none;} .radio-2 label{display:inline-block;wi
2016-09-20 09:49:00
2940
原创 如何跨浏览器处理事件【兼容各大浏览器包括ie】
跨浏览器处理事件 function message(event){ // alert('hahha'); alert(event.type); event.stopPropagation();//阻止事件冒泡 } // 跨浏览器事件处理程序 var eventUtil={ addHandler:function(element,type,handler)
2016-09-19 17:30:33
323
原创 展开/收起按钮显示隐藏文字js代码
Document *{padding:0;margin: 0;} .pn{width:400px; margin: 200px auto 0; background-color: #ddd; text-align: center;padding:0 100px;} .slide a{display: block;width: 100px;height: 30px;line-he
2016-09-14 09:38:47
5267
原创 限时抢购团购倒计时活动完整js代码
团购——限时抢 div,img{ margin:0; padding:0; border:0;}.content3{ background:url(http://img.mukewang.com/534d13940001063d12000398.jpg) no-repeat; width:1200px; height:398px; margin:0 a
2016-09-13 15:10:34
10878
原创 js写当前系统的时间代码案例分享
当前系统时间 window.onload = function(){ showTime(); } function checkTime(i){ //补位处理 if(i<10){ i="0"+i; //return i; } else{ i=i; // ret
2016-09-13 14:38:35
1492
原创 js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码
今天主要给大家介绍下如何用js原生代码写出全选、全不选、反选按钮。代码如下： Document 你的呢爱好很广泛！！ 全选/全不选 足球 篮球 游泳 唱歌 // 处理全选 document.getElementById('checkall').onclick=function(){ /*********************
2016-09-01 21:13:58
22405
1
原创 javascript如何创建子节点
学习完HTML+css后，我并没有直接去学习HTML5和css3,而是开始学习JavaScript，现在就是jQuery基础也懂一点，js也懂一点，css3也懂得那么点。但是给我的感受就是不精通熟练，于是咬咬牙开始从心开始学起了JavaScript，这才是最基础最有用的吧今天要讲的就是如何通过原生JavaScript来创建子节点（以ul添加子节点li为例）如何在城市列表中后添加一个城市名称
2016-08-30 22:31:48
10755
转载 fireforks上无法正常显示bootstrap图标问题
在学习bootstrap的时候，有一个问题始终非常疑惑和困扰，就是firefox无法显示bootstrap自带的那套名为“glyphicon”的图标，在图标的引用处显示的是一个小方块，如图所示（4前面的小方块）： 但在chrome和IE 10下面则是可以正常显示的，说明这个问题并不是因为使用不当、相关文件存储位置错误而导致。在firfox里面显示不出来的情况遇到两种：1、我用的开发软
2016-08-29 08:37:04
822
原创 【css3初级】transition过渡效果写法，鼠标放到图片上图片变小
transition过渡效果可以应用到html每个元素。用法是添加到每个元素的事件中，比如说hover，onmouseover，onclick事件等。下面就给大家介绍下transition的简单用法： Document .animation{width: 200px;height: 200px;background-color: #ff0; --webkit-transition
2016-08-25 15:29:35
3242
原创 css3弹性盒子如何布局
【属性flex-direction：row,row-reverse,column,colmn-reverse】 Document .container{ display: -webkit-flex; display: flex; /*-webkit-flex-direction:row-reverse;*/【使用flex-direction属性，将能控
2016-08-25 15:11:57
439
原创 【分享】如何用jQuery算出window scorll的高度是多少！
这是简单的计算鼠标滑动页面时距离顶部高度scrollTop的一个计算方式~~
2016-08-25 15:00:14
314
原创 工作一个月的心得体会
到这家新公司上班也有一月半久了，高兴的是我如愿走上了前端开发之路（小白），让我迷惑的是现在所做的工作与之前所想的完全不同。--做公司内容管理系统、信息发布平台界面。说到底，与当今的电商网站没半毛钱的关系，技术上似乎成长也非常慢。来公司的第一个星期就开始加班了，赶着做体检预约和医生预约页面，没有设计稿，完全靠自己去参考借鉴别人家的预约平台，结合我们当前的预约需求写出了一套说不满意吧也还凑合能用上
2016-08-23 10:05:35
3532
原创 原生javascript实现图片自动轮播和点击轮播代码
Document /*重置样式*/ *{margin: 0;padding: 0; list-style: none;} /*wrap的轮播图和切换按钮样式*/ .wrap{height: 170px;width: 500px;margin: 100px auto; overflow: hidden;position: relative;} .wrap ul{positio
2016-08-23 09:56:13
27251
原创 简单jQuery根据屏幕下拉到一定高度显示返回顶部按钮代码
无标题文档.panel{overflow:hidden;width:100%;height:1000px;}#return-top{position:fixed;bottom:10%;right:50px; width:60px;height:60px;background-color:#eee; text-align:center; display:none;}#return-top a
2016-08-23 08:35:58
7870
原创 简单tab选项卡切换代码教程
Document .tab{width:80%;margin:100px auto;} .top{overflow: hidden;} .top li{float: left; width: 10%; cursor: pointer;} } } 我是选项卡1 我是选项卡2 我是选项卡3 我是选项卡4
2016-08-17 15:30:24
2322
原创 css3初体验之animation简单动画例子【来回滑动的小球】
Document div{width: 200px;height: 200px;border: 1px dashed green;} div span{ display:inline-block; width: 30px; height: 30px; border-radius: 100%; background-color: red; animat
2016-08-17 15:24:52
8385
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人