Press "Enter" to skip to content

Category: Web 前端

SVG 中的平滑动画

HTML5 中对于 SVG 的引入极大的丰富了 Web 页面的表现力,而且,SVG 本身就支持动画。通过使用 <animate/> 或者 <animateTransform/> 元素可以让 SVG 元素产生动画,还有更加高端的 <animateMotion/> 可以产生沿着路径移动的动画。 但是在实际的使用中发现,SVG 的动画帧率比较低,甚至存在直观上能够感受到的卡顿现象,尤其是在移动设备上查看的时候。如何能够让 SVG 的动画也达到丝般…

2 Comments

移动 Web 页面的流畅动画

如果是准们为移动设备编写的 Web 页面,可以充分利用 CSS3 来完成页面动画效果,非常流畅。 比如说,我要在页面上以动画效果让一个元素向右移动 300 像素,那么可以使用两种不同的方式来实现: 1. 让元素是绝对定位的,然后修改元素的 left 属性从当前位置到加 300 像素 2. 修改元素的 transform 属性,设置为 translateX(300px) 那么这两种方式在实际的运行效果上,是有差异的。 我们使用一台中兴 X9180 + Android 4.4.2…

1 Comment

模拟 iOS 日期时间选择器的拨轮

模拟 iOS 日期时间选择器的拨轮效果图: 在线Demo: http://demo.ijuer.com/spinner.html,可用手机浏览器或者 PC 上得 Chrome 浏览器模拟查看。 点击下载源码 JS 代码: /** * 模拟 iOS 日期时间选择器的拨轮。但是没有 3D 卷曲效果 * @param {DOMElement} spinnerLayerElement 具有 .spinner-layer 类的一个 DIV 元素 * @param {Array} slo…

Leave a Comment

HTML5 中的 Canvas arcTo vs SVG ArcTo

在 HTML5 中,要搞出来一段弧线,有 2 中方式:使用 Canvas 的 arcTo 或者使用 SVG 的 path 元素。这两者都有 ArcTo 的概念,但是他们之中的 ArcTo 的差异还是很大的。 Canvas arcTo 函数 在 Canvas 中,arcTo 是最容易引起误解的一个函数,因为他的名字、参数以及输出完全不符合常规逻辑。但是一旦你理解了,就能够很准确的使用这个函数了。 下面是一个交互演示,让我们来认识一下 Canvas 中的 arcTo 函数是如何工…

4 Comments

Lazy Load 延迟加载长页面中的图片

原文链接:http://www.appelsiini.net/projects/lazyload Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担…

Leave a Comment

mCustomScrollbar的介绍和使用方法一款jQuery自定义网页滚动条样式插件

插件效果图 mCustomScrollbar官网 如何使用 mCustomScrollbar 首先,先请你下载作者提供的插件包,里面包含了所有的插件文件和一些例子。以下的四个文件时必须要上传到你的服务器上的:jquery.mCustomScrollbar.js, jquery.mousewheel.min.js, jquery.mCustomScrollbar.css and mCSB_buttons.png。 第一步:加载插件的样式文件。 可以使用以下代码,引入插件包中的 …

3 Comments

网页中遇到数字和字母不会自动换行的办法

前几天做网页,发现网站中的数字和字母不会自动换行,查了一些资料才知道当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行。并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行。 这个问题如何解决? 先来认识一下两位主角 word-wrap 和 word-break。 word-wrap 用来控制换行 两种取值: (1) normal (2) break-word(此值用来强制换行,内容将在边界内换行,中文没…

1 Comment

jQuery选择器大全

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进行一个介绍及归类。 jQuery 选择器大体上可分为 4 类:基本选择器、层次选择器、过滤选择器、表单选择器。 其中过滤选择器可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素…

Leave a Comment

js 字符串转换成数字

在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形式的.在网上找了一下js字符串转数字的文章,这个比较全 方法主要有三种 转换函数、强制类型转换、利用js变量弱类型转换。 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这…

1 Comment