- 博客(92)
- 收藏
- 关注
RSS订阅原创 腾讯观看高清视频的方法
https://v.qq.com/x/page/y0539nxjptf.htmly0539nxjptf为iframe中的vid，这样就可以选择观看的清晰度
2017-10-09 21:00:22
881
原创 机票去程返程的切换效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport
2017-09-04 16:40:53
1004
原创 white-space: nowrap解决滑动的应用
.case-box-wrap { overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { display: none;
2017-03-27 11:07:58
1637
原创 js模拟网页进度加载。
这个小玩意用于h5上的模拟加载还是可以，就是打开的时候模拟正在加载。但是实际项目中并不一定准确。因为并没有真实请求，慎用！#p{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;
2016-07-19 18:11:06
772
原创 团购以及活动倒计时简单实现
淘宝美团一些网站上面经常搞什么活动倒计时。看到了自己也玩一下吧。实现方法都一样，无非就是后台传值过来活动结束的时间，然后减去当前的时间进行动态插入时间节点。html：<div class="box" end-time="1463500799" start-time="1463381269"> 距离活动结束还有<span id="time"></span> </div>js动态
2016-05-16 18:30:14
1974
原创 滑动的导航，背景图片或者边框滑动效果
滑动都是一个道理。 主要就是根据当前滑块的位置计算出要移动的距离。 可能也算一个小小的算法把 我觉得这是核心。function setSlider(i) { $(slider).width(array_w[i]); $(slider).stop(true, true).animate({ '
2016-05-05 18:46:45
456
原创 垂直居中解决方案，兼容ie6+
本来想发在博客上的。妈的最近博客抽风。文章发布老是有问题。哎不想折腾。烦死人了。直接放个demo得了垂直居中demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>垂直居中解决方案（兼容ie6+）</title> <link rel="stylesheet" href="http://w
2016-04-28 16:08:19
2375
原创 网页底部固定的两种方式
小小的需求，不管内容页面的多少。始终要底部固定在页面窗口的底部。 实现方法两种，道理简简单单，公司的电脑妈的一打开github就死机。真是无力吐槽了。。。方法一： 判断高度$(function() { footerAuto(); }) function footerAuto() { var _wh = $(window).height();
2016-04-27 15:40:39
1027
原创 复习一下两列布局。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>两列布局</title> <link rel="stylesheet" href="http://www.zhangweiwei.cn/demo/reset.css"> <style> .wrap {
2016-04-22 17:23:38
442
原创 手风琴切换的效果
2016第一遍文字，写写这玩意玩一下demo: http://codepen.io/tianzi77/full/eJoaww 代码都不想上了，里面都有。更多是样式的细节与宽度的计算。还有一些动画切换的效果。收笔下班。哈哈哈
2016-02-18 18:45:21
454
原创 bfc的一些应用
好久在这里写文章了， 谈谈bfc吧。概念什么的就不说了。 很简单的一个东西，在布局的时候确实真的很有用处的。 写了个列子http://codepen.io/tianzi77/pen/MKwLpr <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>BFC应用之目录线</title></head><body> <
2015-12-11 10:22:47
438
原创 jquery的一些学习心得总结
自己对jquery的学习总结jq的设计思想：模拟css选择元素$('div') $('.div') $('#div')独有的表达式选择 $('div:first') $('div:even')多种筛选方法jq写法：方法函数化 .html() .click() 链式操作 取值赋值合体与js的区别：jq与js可以共存，但是不能混用，$(this).html();this.inner
2015-09-27 21:43:33
1801
原创 无限滚动js
封装成一个jq插件：(function($){ $.fn.myScroll = function(options){ //默认配置 var defaults = { speed:40, //滚动速度,值越大速度越慢 rowHeight:24 //每行的高度 }; var opts = $.extend({}, defaults,
2015-09-22 16:48:57
913
1
原创 好玩的input输入框
这个效果可以用于各种输入框效果，搜索什么的。 demo：http://codepen.io/tianzi77/full/XmXZmW简单的input标签作为html结构： <input type="search" size="50" id="search"> <label for="search" class="searchlabel"></label>样式主要玩到了before
2015-09-15 17:33:34
511
原创 玩玩斜线导航
很多网站采用怪异的导航，看起来很酷，斜线导航就是一种。 demo见：http://codepen.io/tianzi77/pen/bVNvpq <ul id="nav"> <li id="nav-1"><a href="#">I love you</a></li> <li id="nav-2"><a href="#">Test nav</a></li>
2015-09-04 22:36:27
528
原创 js快速排序
快速排序（Quicksort）是对冒泡排序的一种改进，是一种分而治之算法归并排序的风格核心的思想就是通过一趟排序将要排序的数据分割成独立的两部分，其中一部分的所有数据都比另外一部分的所有数据都要小，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，以此达到整个数据变成有序序列理论上的步骤：找到一个“支点”项目在数组中，可以是中心点,基准 在阵列中的第一项开始指针（左指针）。
2015-08-31 16:57:37
815
原创 纯css玩转三角形
如今css3盛行的时代，用canvas，svg以及linear-gradient，radio－gradient都能画出各种各样的图形。但是早在css2时代，画三角形就不是什么新鲜事。这里简单总结一下，也方便自己查阅。<div class="triangle-up"></div>写出通用结构， .triangle-up { width: 0;
2015-08-27 18:57:33
783
原创 流式布局之等比列缩放的盒子。
说到等比列布局，很多开发者便想到js，在响应式设计逐渐成为主流的今天，流式布局这个词即使放在一两年前也绝算不得是个新鲜词汇。下面是一个布局实例： <div class="item">here is somediv</div> <div class="item">here is somediv</div> <div class="item">here is somediv</di
2015-08-27 09:42:45
1351
原创 css3中webkit内核的滚动条样式
项目当中用到的滚动条样式，在别人的基础上调成适合自己的样式。（IE可以调试滚动条样式，firefox目前不能调试）::-webkit-scrollbar { width: 14px; }/* Track & scroll thickness */ ::-webkit-scrollbar-track { background-color:#ddd; }/* Track color */ ::-we
2015-08-24 11:46:49
1457
原创 pptv首页导航效果
周末闲时打开pptv看直播，然后发现它的导航改版了，还是比较酷的。出于对同行对热爱，自己也试着实现了一下：demo：http://output.jsbin.com/pomimajidu pptv效果：www.pptv.comhtml： <ul class="nav"> <li><a href="" id="pagenav_tv" channel="2" target="_pa
2015-08-23 17:23:23
910
原创 CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏
http://codepen.io/tianzi77/pen/GJayoR
2015-08-19 09:59:00
5612
原创 javascript的简单逻辑题目
ps：纯属练习逻辑，项目开发中实际用处不大，老鸟飘过。题目1：求一个数组的最大ji数和最小偶数，并返回他们的和，如果一个数不存在则返回null。方法1： function evenOdd(arr){ var even=[],// 偶数 odd=[];//基数 for(var i=0;i<arr.length;i++) i
2015-08-17 21:31:02
3192
原创 css让footer永远保持在页面底部
案例1：只保存在页面底部，不固定。思路： html： <div class="body"> <header>我是头部</header> <div class="content">我是内容</div></div><footer>我是页脚，我总是固定在页面底部</footer> * { margin: 0; padding: 0;}html, body {
2015-08-17 16:54:45
4998
1
原创 css3围绕圆形旋转思路
http://codepen.io/tianzi77/pen/yNWYMO http://codepen.io/tianzi77/pen/bdydwK供参考
2015-08-16 22:35:49
7560
原创 被这个样式惊醒
http://codepen.io/tianzi77/pen/ZGPmgR在codepen上面看到的一个效果，我承认我是一个偏向审美的页面仔。如此效果却被同事说她并不喜欢玩样式。。。看看简介的html结构： <h1 class="gradient1">知不知对你倾上万缕爱意</h1> <p class="gradient2">Love is there in side,Make life
2015-08-11 17:10:11
681
原创 页面仔玩样式
demo地址：http://codepen.io/tianzi77/pen/pJYQLw结构html： <!--做一名合格的页面仔--> <div id="nav"> <ul> <li>hl</li> <li>hl</li> <li>hl</li> <li>hl</li>
2015-08-11 16:18:13
617
原创 网页遮层
<div class="mask-cj" style="display:none; position:absolute; width:100%; height:100%; top:0; left:0; z-index:888;background:rgba(0,0,0,0.5);"> </div>网站body顶部添加一层遮罩
2015-08-10 14:32:54
585
原创 也玩before 和after伪元素玩五颜六色的导航
demo地址：http://codepen.io/tianzi77/pen/gpEMxb伪元素能做什么呢？ “伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。单词“pseudo”是希腊语的英译，它的基本意思是“说谎的，不诚实的，错误的。”因此叫伪元素是适合的。因为在文档中它不实际改变什么。相反的，它们是像幽灵一般的元素插入在css中，他们对用户是可见的，可以通过css控
2015-08-09 01:22:45
1663
原创 网站右侧导航条的玩法
最近心情很不好，各种工作生活上面的事情，让我很是受伤，刚出来工作感觉程序员确实是个神奇的行业，一个个都觉得自己的智商挺高的，哎，每天起早贪黑的上下班，还天天受气，真是日了够了，一个人一座城，一行代码到天明。或许真的老了，我居然前所未有的想拥有一个属于自己的家，渴望能吃到几口热喷喷的饭菜，能和最爱的人说上几句掏心掏肺的话，能一起见证风风雨雨。然而并没有什么用，就像js设计模式里面说的一个例子一样，追一
2015-08-08 14:34:42
3238
原创 用svg实现上传图片进度条效果
demo:http://codepen.io/tianzi77/pen/jPXRKo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <svg width="440" height="440"> <circle
2015-08-04 09:13:12
952
原创 表格js插件highcharts
中文官网：http://www.hcharts.cndemo：http://www.hcharts.cn/demo/index.php?p=27确实很方便。另外 var arr=[{ "endCount": 12, "hour": 0, "minutes": 0, "week": 0},{ "endCount": 2, "hour": 0, "minutes"
2015-08-03 19:04:18
609
原创 css大会网站顶部的一个特效
看到http://css.w3ctech.com/ 上一个效果觉得挺赞的。然后学些了一下。demo地址：http://codepen.io/tianzi77/pen/mJaLWq html结构很简单，就是一个p，2个span标签嵌套在a标签里面。 <a href="/" class="link-mallki"> 思君子兮未敢言 zhuangjia
2015-08-03 10:38:39
828
原创 css中的bfc怎么玩？
首先弄明白一个概念，上面是bfc？ w3c是这样解释 BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。说通俗一点就是： float的值不为none position的值不为static或者relative display的值为 table-cell, table-caption, inline-block,
2015-08-02 19:17:40
681
原创 简单的数组求和
demo：http://codepen.io/tianzi77/pen/YXdXjb<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { color: #999; f
2015-07-31 17:16:53
1027
原创 改变网页背景色的一种思路
随便写写啦，其实太简单啦，就当玩玩配色： http://codepen.io/tianzi77/pen/GJPRYE结构html <div class="bg"> <div id="yellow"></div> <div id="red"></div> <div id="green"></div> <div id="blue"></div> <div i
2015-07-31 11:45:04
748
原创 无聊玩闭包
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <script> va
2015-07-31 10:02:52
498
原创 可动态切换日历demo
demo地址：http://codepen.io/tianzi77/pen/vOQbPY看别人的demo.自己也尝试写了一下；小日历。结构： <div id="calendar" name="calendar"> <ul> <li class="current"><strong>1</strong>JAN</li> <li cla
2015-07-30 19:10:52
1072
原创 innerHTML,innerText,outHTML的用法及区别详解
innerHTML,innerText,outHTML的用法及区别,今天就详细的解说并且带有实例说明。大家一看就明白，进入正题，接下来我们用下面的这段代码做测试<div id="tianzi"> <span style="color:red">www.seostudying.com</span> </div>1.tianzi.innerText 它得到的是<div></div>标签中的文本节点的内
2015-07-28 20:49:36
1354
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人