本文实例讲述了轻量级网页遮罩层jQuery插件用法。分享给大家供大家参考。具体如下： 使用jQuery的好处是很多人为它写一些组件，而在项目所需用到功能也都可以找到一些组件去完成。 现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作，取而代之的是弹出一个遮罩层显示一个loading提示框，效果如下。其实这个需求很简单，但很多组件体积相对这个需求来说太大了，在网上瞎溜达了找到了一个还不错的组件，作者是上面也没...
本文实例讲述了jQuery插件简单实现方法。分享给大家供大家参考。具体如下： (function($){ $.fn.extend({ myFunk: function() { // 此处必须返回jQuery对象return $(); }, myPunk: function() { return this.addClass(punked) .bind(click, function(){ alert(You were punked!); }); } }); })(jQuery);使用方法如下： $(.select).myFunk(); $(.select).myPunk();希望本文所述对大家的jquery程序设计有所帮助。
BoxScroll 常见图片轮播效果的简单实现。可以数字列表控制或者左右按键控制。逻辑很简单，到了尽头得往回跑，看看注释就知道了。 代码如下: HTML <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="" name="keywords" /> <meta content="" name="description" /> <meta name="author" content="codetker" /> <head> <title>简易图片轮播插件</title> <li...
回首望，曾经洋洋得意的代码现在不忍直视。曾经看起来碉堡的效果现在也能稍微弄点出来。社会在往前发展，人也不得不向前走。 参考于搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑，还有很多可以拓展的空间。希望大家能多提意见与建议。 代码如下: HTML <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="" name="keywords...
HTML5中定义了一种input框很好看的下拉列表--datalist，然而目前它的支持性并不好(万恶的IE，好在你要渐渐退役了...)。于是最近更据需求写了一个小型datalist插件，兼容到IE8(IE7应该没多少人用了吧？)。实现的具体需求如下: 当被选中的时候(触发blur焦点)(不管是鼠标还是tab键)清空input框并且显示自定义的下拉列表,然后可以用键盘的上下键选择(鼠标当然肯定没理由不可以啦)，单击鼠标左键或者enter键将选中的列表的值输入到...
Hello，一个激动人心的好消息，现在我为大家整理最近7月发布的jQuery插件。 如果你熟悉任何下面列出的插件，请分享你的反馈与我们的读者，或如果你知道哪一个我们没有收录，那么请与我们分享在下面的评论部分。 我们希望你会发现这个列表下面这个列表对您很有用。 1. 固定表头固定表头是一个jQuery塞进任何有效的表创建固定表头表标记了。 2. Stackgrid.adem.jsstackgrid.adem.js 是一个非常快速和简单的JavaScript插件，帮助你创建...
闲来无事，搞了个页面的分屏效果，先来看下效果： 出于可自定义宽高的目的,屏幕分块由CSS控制，由js控制估计等分模块效果一般.程序相关说明： HTML结构： <div class="header">header </div><div class="container" id="displayArea"><!-- 分屏内容渲染区域 --></div> <div class="footer"><!--省略其他代码--> </div>js调用： //分屏数据var iframes = [{id:frames_1,frameName:百度一下,src:http://www.baidu.com},{id:frames_1,...
老规矩，先贴代码 <script>$(function(){window.onload = function(){var $li = $(.taocan-title li);var $ul = $(.taocan-content .con110);$li.mouseover(function(){var $this = $(this);var $t = $this.index();$li.removeClass();$this.addClass(active);$ul.css(display,none);$ul.eq($t).css(display,block);})}}); </script> 以上所述就是本文的全部内容了，希望大家能够喜欢。
废话不多说，首先把源码分享给大家。 //ajax支持库 /*! ** Unobtrusive Ajax support library for jQuery ** Copyright (C) Microsoft Corporation. All rights reserved. *//*jslint white: true, browser: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: false */ /*global window: false, jQuery: false */ /* data-ajax=true...
先上效果：代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>日期选择</title> <link rel="stylesheet" href="reset-jquery-ui.min.css" /> <script type="text/javascript" src="jquery-1.8.3.min.js"></...
首页banner的酷炫效果多来自全屏大图的幻灯片动画，下面提供一种完美兼容的jquery动画特效：全新jquery多点滑动幻灯片——全屏动画animateSlide（代码完全原创）。 直接上代码，把html、css和jquery代码copy到页面上即可呈现完美画面。 html代码如下： <div class="animateSlide"><div class="animateSlideImgWrap"><div class="animateSlideImgBox present"><p class="text1">亲，这是第一行标题</p><p class="text2">AAAAAAAAAAA...
bgStretcher 2011 (Background Stretcher)是一个jQuery的插件，可以为你的网页添加多张背景图，且多个背景图能够自动切换，同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡出，滚动，幻灯，其中选用滚动和幻灯时，可以选择方向，上下左右，或者左上右下，右上左下。图片切换顺序也可以设置正向，反向或者随机。更多选项就看你自己慢慢研究了。 bgStretcher是一个jQuery插件，它允许你添加一个大图像（或一组图...
这是一款非常强大的内容切换插件，它基于jQuery，它充分响应，支持移动设备，支持手机触摸，键盘翻页；它内置幻灯、视频播放计时器，它拥有各种模式：自定义，自动响应，全屏；它有多种动画效果、3d效果...总之你想到的效果它都做到了，它的名字叫Slider Revolution。 HTMLSlider Revolution是一款基于jQuery的插件，使用它时需要先载入jQuery库文件，以及Slider Revolution依赖的css和js文件。 <script src="js/jquery.js"></scr...
用法：首先在head中分别引入jQuery及本插件<script type="text/javascript" src="jquery-1.7.2.min.js">script> <script type="text/javascript" src="jquery.enplaceholder.js">script> 然后就可以调用鸟//通过value模拟placeholder $(input).placeholder(); //通过插入元素模拟placeholder $(input).placeholder({isUseSpan:true}); 代码：<script type="text/javascript" src="/demo/js/jquery.min.js"></script><script ...
NProgress.js是极细的纳米级进度条，用现实的细线条动画让用户看到网页正在发生的事情！ 你也许已经在 Youtube 上看过了那道红色激光脉冲，它会在你切换页面时出现。其实许多移动浏览器的进度条都是这个样式，但是在网页上实现可不多见。不过，有了 NProgress 这个 jQuery 插件，你也可以轻松实现！NProgress.js应用于复杂网页的细长进度条。由 Google, YouTube, 和 Medium 提供灵感。 安装 依赖于 jQuery (1.8版本及以上)，添加 n...