为了练手，自己学敲网站时刚好碰到需要制作侧边栏，在网上也查了各种插件以及框架都可以实现这个功能，但是想自己学着用js原生学一个试试，于是就初略完成了侧边栏的实现，可以让初学者参考参考，代码能力有限。 其中主要设计的就是animate（）函数，animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如...
先给大家展示下效果图，如果感觉还不错，请参考实现代码。一、每行固定个数：保证排版的美观 .list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; }二、随页面宽度调整个数和大小：保证图文的可读性 .list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; }1、媒体查询控制宽度@media screen and (max-width:1280px){ .list-table1 li{width:25%} } @media scree...
深入响应式原理 大部分的基础内容我们已经讲到了，现在讲点底层内容。Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象，修改它则更新视图。这让状态管理非常简单且直观，不过理解它的原理也很重要，可以避免一些常见问题。下面我们开始深挖 Vue.js 响应系统的底层细节。 如何追踪变化 把一个普通对象传给 Vue 实例作为它的 data 选项，Vue.js 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。这是 ...
数据展示时，表头的固定，可以有更好的可读性。 一、实现方式：1、定义2个表格，一个absolute固定 <div class="table1-wapper"> <table width="100%" cellpadding="0" cellspacing="0" id="table1"> <tr><th><div>序号</div></th><th><div>股票名称</div></th>...</tr> <tr>...</tr> </table> </div> <div class="fixed-table1-wapper"> <table width="100%" cellpadding="0" cellspacing="0" id="fixed-table1"> </table> </div...
今天我们继续内容滑动切换效果的第二部分讲解。如今我们的web开发都要适应移动设备，就是说我们的web页面要在移动设备如手机端也能正常访问，所以我将第一部分的基本切换效果做了加强，增加了响应式和触控滑动效果。效果展示 源码下载 本文是hwSlider-内容滑动切换效果的第二部分，演示DEMO都是基于第一部分内容的基础上的，所以，如果您还没阅读过第一部分的话，请先移步参阅：基于jQuery和hwSlider实现内容左右滑动切换效果附...
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 学习要点：1.辅组类2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具， 辅助类提供了一组类来辅组页面设计，而响应式工具则利用媒体查询显示或隐藏某些内容。一．辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、显示关闭图标等等...
本文实例讲解了tab响应式切换效果，利用js对样式进行动态切换即可。 多的不说，请看代码<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>tab响应式切换效果</title> <link rel="stylesheet" href="css/tab.css"> <script type="text/javascr...
响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计。这意味着，无论用户是在移动、平板还是桌面设备上浏览 Web 页面，设计都将根据该设备的屏幕分辨率显示特定的布局，从而适当地响应设备。 该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计。对不同屏幕分辨率的反应方式。 没有自定义样式，我们的电网将3列的布局在所有的屏幕宽度：在我们的自定义样式，我们希望此网格叠...
本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码。分享给大家供大家参考。具体如下： 运行效果截图如下：mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件，mislider轮播图插件的特点有：使用简单在同一个屏幕中支持多个轮播图轮播图的内容可以是单张图片或复杂的HTML内容轻量级响应式设计非常容易定制丰富的回调函数跨浏览器，支持IE8+浏览器引入核心文件 mislider插依赖于一些插件，在引入之前要先引入jQ...
简要教程 aimaraJS是一款非常实用的纯javascript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点，可以制作多级树结构，每个节点上可以都带有右键上下文菜单，并且每个节点上都可以配置不同的图标。它的特点有： 可以创建一个基本的树结构并渲染它。可以实时添加和删除树节点。可以显示不同的树节点图标。在树节点打开和关闭的时候可以自定义事件。每个树节点上都可以制作右键上下文菜单。 使用方法 使用该幻灯片插件...
入门基础 Chart.js是一个基于HTML5的开源图表库，可以方便简洁的绘制美观的图表。 主要特性包括： 1、支持6种不同的表格类型：曲线图、柱状图、饼状图、雷达图、极坐标区域图、环图。 2、基于HTML5开发，支持所有浏览器（包括IE7/8）. 3、不依赖于其他任何库，仅有4.5k大小，并且可以进行定制。 Chart.js 是一个基于 HTML5 canvas 的响应式、灵活的、轻量化的图表库。库中提供了六种不同的图表类型，每种类型都带有一系列的自定义选...
jquery弹出层插件，支持消息提示、错误提示、确认框提示等。交互体验度非常好，大家都用微信支付、支付宝等完成用户体验度非常的不错。本插件至少要支持IE9+。使用方式也非常的简单、粗暴，很符合大众的jquery插件使用方法。 先给大家演示效果： 在线预览 源码下载 代码如下： <h1>Sweet Alert</h1> <h2>A beautiful replacement for JavaScripts "Alert"</h2> <button class="download">Download</button> <h3>So... What does...
jquery.gridrotator是一款非常实用的响应式图片展示画廊插件。这款图片展示画廊插件将图片像网格一样排列，然后随机将某个格子中的图片翻转显示另一张图片。共有6种效果。 HTML结构:HTML结构非常简单。 <div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow"><ul><li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li><li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a...
布局不是基于float，也不是基于绝对定位，看最下面的html,css就知道了。也没有满篇烦人的html插入，代码很清爽 function getIndex(index) {if (index < 10) {index = "00" + index;} else if (index < 100) {index = "0" + index;}return index; } var $ = function(id) {return document.getElementById(id); }; require([ "avalon-min" ], function(avalon) {var waterfall = {load_items : null,loaded_items:[],col_num : 0,//...
优秀响应式jQuery焦点图插件bxSlider，优秀响应式布局设计jQuery插件，自适 应任何设备，切换内容可以是视频、图片、HTML、支持触摸设备，自定义函数 callback,支持众多的参数自定义配置，浏览器支持Firefox, Chrome, Safari, iOS, Android, IE7+。使用方法： 1. 加载jQuery和插件<!-- jQuery library (served from Google) --> <script src="jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script...