今天给大家分享一款基于jquery固定于顶部的导航，这款导航当浏览器滚动条位于顶部时，导航高度较高，当浏览器滚动向下滚动时，导航高度自动减低，并位于顶部。效果图如下：源码下载 实现的代码： html代码：Page TitleContent goes here!Content goes here!Content goes here!Content goes here!Content goes here!Content goes here!Content goes here!$(document).ready(function () { skrollr.init({ smoothScrolling: true });...
今天给大家分享一款基jquery超炫的动画导航菜单。这款导航菜单，初始时页面中间一个按钮，单击按钮，菜单从左侧飞入页中。再次单击按钮，导航飞入左侧消息。动画效果很非常炫。一起看下效果图：源码下载 html代码：First Second Third Fourth FifthAnimate$('button').on('click', function () { $('ul').toggleClass('animate'); }); //@ sourceURL=pen.jscss代码：body { text-align: center; }ul { width: 400px; padding: 0; m...
在线演示 我们曾经介绍过俩款知名的响应式布局插：isotope和masonary，今天我们这里再介绍一款相当不错的响应式布局插件 –Freetile.js，使用它同样可以生成超酷的动态布局效果。相信大家一定会喜欢！ 主要特性 Freetie来自于Assemblage和Assemblage Plus的内建布局引擎，设计灵感来自于Masonry，VGrid和Wookmark，但是和他们相比较，拥有以下独特的地方： 允许包含任何尺寸的元素，并且不要求一个固定的列宽度，因此你不需要指定列...
经常使用百度搜索的同学，一定不会忽视输入框的下拉索引，它是如此方便，然而得天独厚的条件使得这项异步技术多少面临些考验，高并发的服务端请求督促着他们的前端攻城师必须尽可能地减少发送ajax的次数。听起来似乎与本文无关，但并不是这样。首先就暂且让我们为百度免费做个广告吧。在百度首页输入“前端”一词，利用chromebug可以很轻松地看到所发送的响应，结果显示如下：代码如下: window.bdsug.sug({q:前端;,p:false,s:[前端...
我们接着改造服务器，让请求处理程序能够返回一些有意义的信息。 我们来看看如何实现它： 1、让请求处理程序通过onRequest函数直接返回（return()）他们要展示给用户的信息。 2、让我们从让请求处理程序返回需要在浏览器中显示的信息开始。 我们需要将requestHandler.js修改为如下形式：代码如下: function start() {console.log("Request handler start was called.");return "Hello Start"; } function upload() {console.log("R...
原生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，它充分响应，支持移动设备，支持手机触摸，键盘翻页；它内置幻灯、视频播放计时器，它拥有各种模式：自定义，自动响应，全屏；它有多种动画效果、3d效果...总之你想到的效果它都做到了，它的名字叫Slider Revolution。 HTMLSlider Revolution是一款基于jQuery的插件，使用它时需要先载入jQuery库文件，以及Slider Revolution依赖的css和js文件。内容切换的主体html结构如下，由div....
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. ...
本文实例讲述了jQuery实现响应鼠标背景变化的动态菜单效果代码。分享给大家供大家参考。具体如下： 这是一款jQuery响应鼠标背景变化的动态菜单，菜单的背景在鼠标放上后有所变化，这款菜单的实现主要是使用了图片，修改菜单的时候要修改图片，有些麻烦，不过效果不错，引入的jquery插件是1.7版本，高版本jQuery未测试，应该也可以啦。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic...