- 博客(66)
- 收藏
- 关注
RSS订阅原创 JS-全选框的逻辑
js代码 for(var k=1;k<inputs.length;k++){ inputs[k].onclick=function(){//为每个复选框添加点击测验，从而能使全选框实时同步 for(var j=1;j<inputs.length;j++){ if(inputs[j].checked==false){//循环所有复选框，判...
2018-08-01 14:09:33
525
原创 JS实现五星好评效果
效果图 css部分 li{ list-style: none; display: inline-block; width: 27px; height: 27px; background: url(img/star.gif) no-repeat 0px 0px; } html部分 <body> <ul>...
2018-08-01 13:55:01
3668
原创 隐性行元素转块元素
1浮动： 对span设置浮动效果，将把span转化为block元素 2绝对定位： 对span设置绝对定位absolute，将把span转化成block元素
2018-08-01 13:43:40
215
原创 JS之开关混元大法
效果图：点击第一次消失，再点击一次显现 CSS部分： #ele{ width: 100px; height: 100px; background-color: red; } HTML部分： <body> <button id="btn">点我</button> <div id="ele" s...
2018-08-01 12:48:40
288
原创 圣杯布局margin-自适应窗口
效果： css部分： .big{ float: left;/*对元素都进行浮动*/ background-color: red; width: 100%;/*对中间父元素设置100%宽*/ height: 300px; } .biginner{ background-color: pink; height: 200px; ...
2018-07-31 13:03:42
310
原创 圣杯布局padding-自适应窗口
效果： css部分： *{ padding: 0px; margin: 0px; } .outer{ /*空出左右两边,做不变的导航栏效果*/ padding-left: 100px; padding-right: 200px; } .left{ width: 100px; height: 200...
2018-07-31 12:00:27
289
原创 图片居中的方式
方法一： 图片：margin-left: 50%; transform: translateX(-50%); 方法二： 父级：position:relative; 图片（子）：position:absolute; left:50%; ...
2018-07-31 11:42:42
569
原创 JS实现进度条效果
CSS部分： .div{ height: 100px; width: 300px; background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(2...
2018-07-31 10:55:11
345
原创 JS完成硬币翻转效果
HTML部分： <div class="bg"> <div class="left"></div> <div class="right"></div> </div> CSS部分： .bg{ width: 300px; hei
2018-07-31 10:43:24
738
原创 瀑布流布局
<body> <div></div> <div></div> <div></div> <div></div> <script src="js/twodogs.js"></scr
2018-07-11 19:41:39
217
原创 动画animation小结
首先，如何在html中写一个自定义动画：一、在<style></style>中插入动画@keyframes name{ from{} to{} }二、在要加动画的元素上，CSS里添加animation，例如.outer{ animation: do 1s linear; animation-iteration-count: infinite; }三、动画...
2018-07-06 11:09:55
561
原创 transform小结
Transform主要用到以下三个方法：translate（）， rotate（）， scale（）； translate（50px），只是X方向动50px。Translate（50px，100px）才可以动。 transform：rotateX（）；利用左手法则。即顺时针法则。 transform:scale();如果没有设置transform-origin，则以元素中心...
2018-07-06 08:55:48
527
原创 border-radius小结
Border-radius：8个值。 Border-radius:X1 X2 X3 X4/Y1 Y2 Y3 Y4;Border-radius:left-top right-top right-bottom left-bottomdiv宽高为100*200.要实现作图的效果，我们可以知道改变的时X3，Y3，所以我们设置border-radius: 0px 0px 100px 0px/0px 0px ...
2018-07-06 08:50:01
206
原创 鼠标移入，图片放大效果
经过尝试，可以采用transform：scale(倍数)；来操作。 例子如下： 先看效果 鼠标未移入时 鼠标移入后 主要代码如下： <div > <div class="div1"><img src="img/2.jpg" class="pic"/></div>
2018-07-05 11:54:43
1361
原创 伪类选择器focus使用
W3C定义：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。简单来说就是支持input标签。可以在CSS中采用input:focus{}进行操作。如下是简单例子<div class="outer"><input type="text" name="" id="" value="" /></div><
2018-07-05 11:32:48
1780
原创 浮动之我见
首先要明白为什么清除浮动？不占块的位置，占行的位置。脱离文档流，未脱文本流。可以使用这个特性，做文字环绕的效果。浮动是在原来位置往上浮，必须要通过位置。看下面一个例子，给A和B添加浮动之后，就会产生这样的效果：<body> <div class="whole"> <div class="A">AAAAAAAAAAA</div> ...
2018-07-05 11:22:48
140
原创 网页标题的小图标怎么实现呢？
在head标签里加上即可<link rel="icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"/>
2018-07-04 20:29:08
733
原创 如何判断浏览器
navigator对象下的userAgent属性包含浏览器信息var judge=navigator.userAgent.toLowerCase(); if(judge.indexOf('chrome')!=-1){ alert('谷歌') } else if(judge.indexOf('firefox')!=-1){ alert(...
2018-07-04 20:07:58
586
原创 事件委托------取到新生成元素
事件委托，主要参照的原理是事件冒泡。原因是刚生成的元素无法获取到它。例如下边的例子，要取到新生成的元素，在点击新生的元素时，弹出对应的文本。应采取事件监听,兼容IE做法如下function addEvent(obj,fn,even,boolean){ if(obj.addEventListener){ obj.addEventListener(even,fn,boo...
2018-07-04 20:05:05
359
原创 事件机制
事件包括事件目标，事件捕获，事件冒泡。事件捕获从外到内，事件冒泡从内到外。事件目标即为我们要绑定事件的对象。一般的obj.onclick=function(){}即为事件冒泡，即为右侧流程。对于子元素的点击事件，事件将会向外冒泡。如下例子：<div class="div1"> <div class="div2"> <div class...
2018-07-02 20:18:20
247
原创 正则的exec方法和字符串的match方法
var str='123456abca123421aaa2134a1'; var reg_1=/a([a-z]+)/g; var reg_2=/a([a-z]+)/; document.write(reg_1.exec(str)+"<br>"); document.write(reg_2.exec(str)+"<br>");输出结果：abca...
2018-06-25 10:27:58
291
原创 substring( )、substr( )、slice( )方法比较
一、substring（） str1='ABCDEFGHIJKLMNOPQRSTUVWXYZ'; document.write(str1.substring(2,5)+'<br/>');//[2，5） document.write(str1.substring(5,2)+'<br/>');//自动排序 document.write(str1...
2018-06-19 19:23:22
202
原创 数组方法小结
数组方法传入参数返回值是否修改原数组传参函数是否返回Array.slice()截取数组一部分start和end.如果只有start，则包含后边所有。一个新数组×/Array.splice()插入、删除或替换数组元素Start,deletecount,value,....返回新数组包含删除的元素√/Array.unshift()数组头部插入元素Value,.......数组的新长度√/Array.i...
2018-06-14 19:54:56
218
原创 使用定时器实现轮播图
CSS部分： .outer{ width: 400px; height:300px; background-image: url(img/1.jpg); margin: 50px auto; position: relative; } .left,.right{ position: absolute; top: 50%; ...
2018-06-07 18:16:46
1087
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人