-
HTML5（FileReader）实现图片上传预览功能
前言 FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 File 或 Blob 对象指定要读取的文件或数据。下面通过本文给大家介绍 JS 中利用 FileReader 实现上传图片前本地预览功能，需要的朋友参考下。 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去，成功之后拿到 URL 再渲染到页面上，这样做在图片比较小…...- 0
- 0
- 5
-
INPUT、SELECT等表单元素图片对齐问题
今天在写页面时，发现了一个问题，当 INPUT、SELECT 及用图片做的 button 放在一起（并排放一起）时一个高一个矮。刚开始怎么调样式都出不来结构，后来发现原来一个 vertical-align:middle 就可搞定。 归纳如下： 1、INPUT 和图片按钮对齐： <form method="post" action="ccc.asp"&g…...- 0
- 0
- 4
-
IE下radio/checkbox的change事件失效
今天写一个全选功能，在 chrome 和 firefox 下测试都正常实现效果，到了 ie 下死活没效果。一番周折,测试发现在 ie 中勾选了以后还要点击其他位置才会触发 onchange 事件。这种问题呢，有两种方式可以解决，用 onclick 事件代替或者用 onpropertychange 事件代替，Jquery 中也是有这种问题。 $("#radioOne").chan…...- 0
- 0
- 3
-
苹果手机将网站添加到主屏幕上的方法
通常在 iPhone,iPad,iTouch 的 safari 上可以使用添加到主屏按钮将网站添加到主屏幕上。 <link rel="apple-touch-icon" href="/custom_icon.png"/> apple-touch-icon 是 IOS 设备的私有标签，如果设置了相应 apple-touch-icon 标签，则添加到…...- 0
- 0
- 13
-
CSS3判断横屏竖屏方式（三种）
很多时候，为了让手机版横竖屏时有一个理想的效果，我们都需要通过判断区间来设定相应的 css 样式，现在的 CSS3 推出了一个可以判断手机横竖屏的媒体查询。在做移动端页面的时候经常会遇到需要判断横屏还是竖屏，下面将目前已知的通过 HTML，CSS，JS 三种判断方法记录下来，方便以后翻阅。 1、通过在 html 中分别引用横屏和竖屏的样式： <link rel="styleshee…...- 0
- 0
- 6
-
CSS样式表中样式覆盖优先顺序
有时候在写 CSS 的过程中，某些限制总是不起作用，这就涉及了 CSS 样式覆盖的问题，如下： #navigator { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { border: solid 2 #AE0; } 查找一些教材中（w3schools 等…...- 0
- 0
- 5
-
用CSS让字体在一行内显示不换行
当一行文字超过 DIV 或者 Table 的宽度的时候，浏览器中默认是让它换行显示的，如果不想让他换行要怎么办呢？用 CSS 让文字在一行内显示不换行的方法，一般的文字截断(适用于内联与块)： .text-overflow{ display:block; /*内联对象需加*/ width:31em; word-break:keep-all; /* 不换行 */ white-space:nowrap…...- 0
- 0
- 15
-
原生态js方法实现全选复制功能
我的 demo 网站想做一个复制代码的功能，可是原生态的 js 只有 ie 下才能实现，其他浏览器都需要 flash 来实现复制功能，我又不想用 flash，鼓捣了很久，不能复制，我起码能做一个全选的功能吧。下面是复制的代码： function selectCode(objid){ var obj = document.getElementById(objid); obj.select(); } …...- 0
- 0
- 3
-
Span之间空隙原因和解决办法
span 之间的空隙，到底是什么？display:inline-block 的元素虽然能够处于同一行，但是很变态的是它们之间出现了空格，如何处理？ （例如在浮动元素居中当中，我们必须使用 display:inline-block） 实例代码 <html> <head> <meta charset="UTF-8"/> <title>…...- 0
- 0
- 11
-
通过 CSS自定义属性（CSS变量）和 JavaScript 实现高级CSS主题切换
在本教程中，我们将使用 CSS 自定义属性（也称为 CSS 变量）来为简单的 HTML 页面实现主题切换。 我们将创建暗黑和明亮的示例主题，然后编写 JavaScript 以在用户单击按钮时在两者之间切换。 如果你以前没接触过，请先阅读 CSS 变量(自定义属性)实用指南及注意事项这篇文章 就像在典型的编程语言中一样，变量用于保存或存储值。 在 CSS 中，它们通常用于存储颜色，字体名称，字体大小…...- 0
- 0
- 6
-
判断访问用户终端设备类型
以前判断网站的访客全部用的是 userAgent 来判断的，基本上都是判断 userAgent，一些简单点的终端没有什么问题，可是用过一段时间发现有的手机终端不会跳转，后面研究了下百度 siteapp，发现他的函数写的挺好的，可以直接拿来用，判断的也比较全面。 使用 userAgent 判断（iPhone|iPod|Android|ios|iPad） function uaredirect(mur…...- 0
- 0
- 14
-
CSS实现背景图片透明和文字不透明效果
项目中经常会用到背景图上放一些文字介绍，这里介绍两种技术来实现背景图片透明，文字不透明效果，记录一下，方便日后学习。 1.毛玻璃效果： 背景图 + 伪类 + flite:blur(3px) CSS 代码 .demo1{ width: 500px; height: 300px; line-height: 50px; text-align: center; } .demo1:before{ backg…...- 0
- 0
- 11
-
CSS 中 background 属性合并写法
上次写 CSS 样式时同时有 background-size background-positon 两个属性，但是我想合并成一个 background 来写，刚开始遇到了一些麻烦，怎么写都不生效。后面谷歌，我们应该这样子写： background：no-repeat scroll 0px 0px / 200px 29px rgba(0, 0, 0, 0); / 做分割 前面是 background…...- 0
- 0
- 2
-
JavaScript中escape()、encodeURI()、encodeURIComponent()的区别
JavaScript 中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应 3 个解码函数：unescape,decodeURI,decodeURIComponent 。 下面简单介绍一下它们的区别 1 escape()函数 定义和用法 escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。 语法 esc…...- 0
- 0
- 5
-
网站加入鼠标滑过抖动样式
站长闲下来的时候，就四处逛逛网站，顺便扒点其他网站的代码，比如 html、css、js；都是站长通过 f12 或者 view-source 扒到的，有些代码很容易就能扒到，有些很难，比如今天分享的这个，扒了得半小时，才找到 css 具体代码！支持所有网站，wordpress、typecho、hexo 等等之类的。 代码说明： 该 css 代码，作用于 class 为 post-item 下 h2 …...- 0
- 0
- 5
-
Jquery实现页面下拉滚动加载内容
最近要新写一个手机项目，感觉上面不是用得很舒服，然后就新写了一个，改动不是很大。 判断到底部 $(window).scroll(function () { if ($(document).scrollTop() + $(window).height() >= $(document).height()) { alert("哦哦,到底了."); } }); 如果要实现拉到底部…...- 0
- 0
- 10
-
纯CSS3实现手风琴风格菜单具体步骤
有朋友问我，我的 demo 里面的手风琴效果怎么做出来，看起来很漂亮，其实这个手风琴效果没用一点 js，全部用 css3 来实现的，菜单主要通过使用:target 伪类来实现，教程中我们主要通过使用伪类:before 和:target 来定义样式，使用:target 来实现菜单点击展开子菜单事件，希望你能够喜欢这个教程： 如何使用纯 CSS3 创建手风琴风格菜单呢，菜单主要通过使用:target …...- 0
- 0
- 13
-
原生态JS的方法调用CLASS元素标签
最近研究起来原生态的 js 来，主要因为 jquery 太冗余了，拖慢了网站的访问速度，于是就写下了下面的这段代码来替换$(“.a1”)和$(“.a2”)，希望对你们有用。 <html> <head> <title></title> <script type="text/javascript"> window.onlo…...- 0
- 0
- 3
-
纯CSS实现小箭头的方法
我们大多数的小箭头都是用小图片来做的，这里分享一款用纯 CSS 写的小箭头，大家可以看看，以后会放出更多的 CSS 小箭头来供大家参考。 <div class="pre-wrap"> <div class="pre"> <div class="pre1"></div> <div cla…...- 0
- 0
- 5
-
CSS3自定义webkit滚动条样式
默认的滚动条样式巨丑，项目中又有比较多地方会显示滚动条，故回头翻了一下 CSS3，还真能不用插件实现自定义滚动条的样式，Webkit 支持拥有 overflow 属性的区域，列表框，下拉菜单，textarea 的滚动条自定义样式。当然，兼容所有浏览器的滚动条样式目前是不存在的。内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过 css 伪类来实现对滚动条的自…...- 0
- 0
- 11
-
超级有意思经典代码注释图
对于很多程序员来说，最讨厌别人不写注释。而有些人写出来的代码注释，通常拥有幽默搞笑的风格，看起来很有意思。网上收集了许多超级有意思的代码注释，有如来佛、草泥马等有趣的注释！ /*** * .,:,,, .::,,,::. * .::::,,;;, .,;;:,,....:i: * :i,.::::,;i:. ....,,:::::::::,.... .;i:,. ......;i. * :;..:…...- 0
- 0
- 5
-
用纯CSS打造圆形图片旋转的方法
上次看到一个博客的 LOGO 图片很好看，一个旋转的圆形人物图片，但是我看他用了大量的 JS 代码来渲染这个效果。其实这种方式纯 CSS3 是完全可以实现，我们只需要考虑清楚我们的思路。 1、圆形图片 我们这里使用了一张哈弗 H2 的图片。 然后把图片写成圆形。 height: 300px; width: 300px; border-radius: 150px; 2、将图片旋转 这里我们使用了动画…...- 0
- 0
- 4
-
纯CSS绘制各种箭头方法
用 CSS 即可绘制出各种箭头，无需裁剪图片，甚至没有用到 CSS3 的东西。对浏览器支持良好。以前写过一片文章，我博客的评论框就是用箭头来实现的。原理非常简单，通过截取 border(边框)的部分“拐角”实现，几行 CSS 代码即可理解。 一个梯形 当元素宽、高和边框的宽相近（等）时，改变某一边的颜色可以看到一个梯形: 三角形 当元素宽、高为零，且其他边为透明颜色时，可以形一个三角形: 任意角度…...- 0
- 0
- 3
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×