在线演示 我们曾经介绍过俩款知名的响应式布局插：isotope和masonary，今天我们这里再介绍一款相当不错的响应式布局插件 –Freetile.js，使用它同样可以生成超酷的动态布局效果。相信大家一定会喜欢！ 主要特性 Freetie来自于Assemblage和Assemblage Plus的内建布局引擎，设计灵感来自于Masonry，VGrid和Wookmark，但是和他们相比较，拥有以下独特的地方： 允许包含任何尺寸的元素，并且不要求一个固定的列宽度，因此你不需要指定列...
原生JS实现的瀑布流布局，代码及demo代码地址：https://github.com/leozdgao/responsive_waterfall Demo：http://leozdgao.github.io/demo/responsive_waterfall/ 演示图：核心代码： responsive_waterfall.js(function() {var Waterfall = function(opts) {var minBoxWidth;Object.defineProperty(this, 'minBoxWidth', {get: function() { return minBoxWidth; },set: function(value) {if(value 1000) value = 1000;minBoxWidt...
支持响应式的jQuery焦点图片无缝滚动切换特效插件Elastislide，非常漂亮的图片轮播特效插件，支持左右轮播图片、上下轮播图片、自适应移动端显示，支持众多的参数配置：orientation :'horizontal'(水平切换),speed : 500(切换速度,单位毫秒),easing : 'ease-in-out'(动画效果), minItems : 3(默认展示的数量)等,浏览器兼容方面：IE8+、以及较现代浏览器，不介意低版本浏览器的可以使用，当然也可以使用到移动端触屏。支持响应式的j...
jQuery响应式手机端移动端幻灯片图片切换特效插件slick，基于jQuery，功能非常强大，支持左右按钮切换、支持圆点切换、支持自定义切换数量，支持自定义切换速度、支持图片预加载、支持自动播放定义，效果非常的不错，众多的参数自定义支持，觉得可以的可以参考他们的参数配置，还是值得学习使用的。使用方法：1.加载插件和jQuery2.HTML内容3.函数调用$(document).ready(function() { $('.fade').slick({ dots: true, infinite: tru...
优秀响应式jQuery焦点图插件bxSlider，优秀响应式布局设计jQuery插件，自适 应任何设备，切换内容可以是视频、图片、HTML、支持触摸设备，自定义函数 callback,支持众多的参数自定义配置，浏览器支持Firefox, Chrome, Safari, iOS, Android, IE7+。使用方法： 1. 加载jQuery和插件2.HTML内容3.函数调用$(document).ready(function(){ $('.bxslider').bxSlider(); }); 函数选项配置请自定义配置。 查看DEMO 官网下载 以上所述就是...
布局不是基于float，也不是基于绝对定位，看最下面的html,css就知道了。也没有满篇烦人的html插入，代码很清爽function getIndex(index) {if (index = 199) {waterfall.col_num = Math.floor(avalon(window).width()/ waterfall.col_width);waterfall_model.img_list = [];for ( var j = 0; j html{{el.src}}css#wrap ul li { display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 16px; } #wrap u...
jquery.gridrotator是一款非常实用的响应式图片展示画廊插件。这款图片展示画廊插件将图片像网格一样排列，然后随机将某个格子中的图片翻转显示另一张图片。共有6种效果。 HTML结构:HTML结构非常简单。调用插件$(function() { $( '#ri-grid' ).gridrotator(); });注意别忘了引入jQuery和jquery.gridrotator.js文件。 可选参数// number of rows rows : 4,// number of columns columns : 10,// rows/columns for dif...
我看最近微博流行CSS居中技术，我看了几编资料写的都不多好，于是抽时间把相关资料整合了，具体内容如下。 点击此处下载源码 效果展示：要求: 1.尽可能兼容更多浏览器，这里兼容到ie7,ie6不支持max-*就不考虑了。 2.浏览器尺寸变化时，图片总是等比例拉伸或缩放。 3.包裹图片的div也是响应式的，并且每个div的尺寸是一样的。 4.图片始终保持水平垂直居中。 5.图片的行列数不变，这里一直都是3*3. 下面来搞定一个个要求。 满足要求1...
jquery弹出层插件，支持消息提示、错误提示、确认框提示等。交互体验度非常好，大家都用微信支付、支付宝等完成用户体验度非常的不错。本插件至少要支持IE9+。使用方式也非常的简单、粗暴，很符合大众的jquery插件使用方法。 先给大家演示效果： 在线预览 源码下载 代码如下：Sweet Alert A beautiful replacement for JavaScript's "Alert" Download So... What does it do Here's a comparison of a standard error message. ...
入门基础 Chart.js是一个基于HTML5的开源图表库，可以方便简洁的绘制美观的图表。 主要特性包括： 1、支持6种不同的表格类型：曲线图、柱状图、饼状图、雷达图、极坐标区域图、环图。 2、基于HTML5开发，支持所有浏览器（包括IE7/8）. 3、不依赖于其他任何库，仅有4.5k大小，并且可以进行定制。 Chart.js 是一个基于 HTML5 canvas 的响应式、灵活的、轻量化的图表库。库中提供了六种不同的图表类型，每种类型都带有一系列的自定义选...
简要教程 aimaraJS是一款非常实用的纯javascript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点，可以制作多级树结构，每个节点上可以都带有右键上下文菜单，并且每个节点上都可以配置不同的图标。它的特点有： 可以创建一个基本的树结构并渲染它。可以实时添加和删除树节点。可以显示不同的树节点图标。在树节点打开和关闭的时候可以自定义事件。每个树节点上都可以制作右键上下文菜单。使用方法 使用该幻灯片插件需...
本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码。分享给大家供大家参考。具体如下： 运行效果截图如下：mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件，mislider轮播图插件的特点有：使用简单在同一个屏幕中支持多个轮播图轮播图的内容可以是单张图片或复杂的HTML内容轻量级响应式设计非常容易定制丰富的回调函数跨浏览器，支持IE8+浏览器引入核心文件 mislider插依赖于一些插件，在引入之前要先引入jQ...
响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计。这意味着，无论用户是在移动、平板还是桌面设备上浏览 Web 页面，设计都将根据该设备的屏幕分辨率显示特定的布局，从而适当地响应设备。 该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计。对不同屏幕分辨率的反应方式。 没有自定义样式，我们的电网将3列的布局在所有的屏幕宽度：在我们的自定义样式，我们希望此网格叠...
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 创建所谓的汉堡按钮。这些会切换为 .nav-collapse 中的元素。为了实现以上这些功能，您必须...
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 学习要点：1.辅组类2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具， 辅助类提供了一组类来辅组页面设计，而响应式工具则利用媒体查询显示或隐藏某些内容。一．辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、显示关闭图标等等...