Category: Javascript /Jquery / React / Bootstrap / Web

开源ckplayer 网页播放器, 跨平台(html5, mobile),flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 !

CKplayer,其全称为超酷flv播放器,它是一款用于网页上播放视频的软件,支持的格式有:http协议上的flv,f4v,mp4格式,同时支持rtmp视频流格 式播放,此播放器的特点在于用户可以自己定义播放器的风格,诸如播放/暂停按钮,静音按钮,全屏按钮都是以外部图片接口形式调用,用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了,具体的各按钮的位置和底部背景的设置在 ckplayer/ckplayer.js里设置。   功能设置介绍 本教程涉及到以下各点,点击对应标题页面将直接滑动到相应内容: 1:修改或去掉播放器前置logo 2:… Read More

jQuery插件:Tiny Scrollbar滚动条插件(滚动条美化、默认滚动条)

Tiny Scrollbar是基于jQuery的滚动条插件, 风格简洁, 可自定义样式, 体积较小。 插件特点: 支持iPhone, iPad, Android 新版1.8,可以在移动设备上滚动内容 可以在水平方向和垂直方向滚动 支持滚轮,拇指、跟踪、触摸。 它有一个更新函数,这样它就可以处理内容的变化。 拇指大小的滚动条,可以设置为自动或固定数量 容易定制 支持正常的滚动和移动风格转化的滚动。 轻量级其只有100行代码。大小是2,29 kb 样式可以自己设置,很自由。 使用的方法很简单。前提你要调用jquery文件,像这样: <script src="http://www.qingdou.me/jquery.js" type="… Read More

15个带示例的jQuery滚动条插件

1、NiceScroll:可用于桌面、移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式。它支持Div、iFrame、一个body的滚动条效果。适用于iOS设备。 在线演示 | 下载   2、Lion样式jQuery滚动条:nanoScroller nanoScroller提供提供了一种简便的方式让你的网站拥有Mac OS X Lion样式的滚动条。 在线演示| 下载   3、jQuery自定义内容滚动 自定义滚动插件利用就Query UI以提供完整的CSS自定义,它支持水平/垂直滚动,并支持鼠标滚轮(通过Brandon… Read More

jQuery本身方法($.each,$.map,$.contains,$ajax)

常用工具方法 (1)$.trim $.trim方法用于移除字符串头部和尾部多余的空格。 $.trim(' Hello ') // Hello (2)$.contains $.contains方法返回一个布尔值,表示某个DOM元素(第二个参数)是否为另一个DOM元素(第一个参数)的下级元素。 $.contains(document.documentElement, document.body); // true $.contains(document.body, document.documentElement); // false (3)$.each,$.map $.each方法用于遍历数组和对象,然后返回原始对象。它接受两个参数… Read More

Flexslider图片轮播、文字图片相结合滑动切换效果

Flexslider是一款基于的jQuery内容滚动插件。它能让你轻松的创建内容滚动的效果,具有非常高的可定制性。开发者可以使用Flexslider轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。 查看演示DEMO 下载源码 Flexslider具有以下特性: 支持滑动和淡入淡出效果。 支持水平、垂直方向滑动。 支持键盘方向键控制。 支持触控滑动。 支持图文混排,支持各种html元素。 自适应屏幕尺寸。 可控制滑动单元个数。 更多选项设置和回调函数。 HTML 首先在页面head部位载入jquery库文件和Flexslider插件,以及Flexslider所需的基本css样式文件。 <link rel="st… Read More

跨浏览器兼容的HTML5视频音频播放器

HTML5的video和audio标签是用来在网页中加入视频和音频的标签,在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。 How to enable <video> and <audio> tags in all major browsers To make HTML5 video and audio tags work in all major browsers, simply add the following line of code somewhere in the <he… Read More

jquery 很赞的背景图片转换插件 Backstretch

Backstretch Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes. Demo There are a couple of examples included with this package, or feel free to check… Read

5个响应式全屏背景图片变换插件 5 jQuery Responsive Fullscreen Background Image Plugins

1. Vegas Background jQuery Plugin Vegas is a jQuery plugin to add beautiful fullscreen backgrounds to your webpages. You can even create amazing Slideshows.s SourceDemo 2. Backstretch A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element Source + Demo 3. Supersized jQuery Plugin… Read More

图片裁剪:CropZoom插件的应用

我们在使用QQ空间或者开心网等网站的个人中心时,有个上传个人头像的功能。用户在上传自己的照片后,由于照片尺寸不符合网站的要求,要求用户对照片进行裁剪,最终根据用户裁剪的尺寸生成头像。 查看演示   最近在项目中也要用到这样的功能,用户可以对上传的图片进行自由缩放、裁剪,使之符合彩信图片的大小。于是,发现了CropZoom。 CropZoom特性 CropZoom是由Gaston Robledo写的一个功能非常强大的jquery图片裁剪插件,它具有以下主要特性: 1、任意放大和缩小图片 2、360度旋转照片 3、自由拖动,自定义选择区样式 4、及时显示裁剪后的照片,可以与后台程序PHP、JAVA、Asp.… Read More

使用 jQuery Mobile 与 HTML5 开发 Web App (一) ——开发原则

最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mobile 与 HTML5 ,可以很方便的开发出一款具有良好界面及用户体验的 Web App,在这个过程中我收获良多,因此决定针对使用 jQuery Mobile 与 HTML5 开发 Web App 写一个系列的文章。在开始之前,我首先简述 Web App 与原生 App 各自的优缺点。 一. Web App 与原生 App 的优缺点 1.Web App (1).优点 1.开发成本低,周期短, Web 开发者可以使用现成的工具及开发技术。 2.跨平台,用户只需要一个标准的移动浏览器。 3.维… Read More