本文实例讲述了jquery实现仿京东2级菜单效果。分享给大家供大家参考。具体如下： 这里介绍js实现仿京东2级菜单效果代码，带有延时功能，操作上更加舒适自然。 先来看看运行效果截图：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-fjd-style-menu-codes/ 具体代码如下：仿京东网站的2级菜单导航ul{margin:0;padding:0;list-style-type:none;} a{ text-decoration:none;} .mold_open_hover,.mold_open{background-image:...
表单作为 HTML 最重要的一个组成部分，几乎在每个网页上都有体现，例如用户提交信息、用户反馈信息和用户查询信息等，因此它是网站管理者与浏览者之间沟通的桥梁。下面通过实例代码给大家介绍jQuery 实现表单验证功能表单验证表单作为 HTML 最重要的一个组成部分，几乎在每个网页上都有体现，例如用户提交信息、用户反馈信息和用户查询信息等，因此它是网站管理者与浏览者之间沟通的桥梁。在表单中，表单验证的作用也是非常重要的，...
本文实例讲述了jQuery实现两款有动画功能的导航菜单代码。分享给大家供大家参考。具体如下： 这里介绍两个有动画功能的jQuery导航菜单，每个具备移动背景的效果，第二则是渐变背景效果，两个都不错，根据你的喜好选择了，菜单的风格和颜色自己修改一下就能用了。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-2-animate-style-nav-menu-codes/ 具体代码如下：两个有动画功能的导航菜单$(function() ...
记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写得不错，现在回想起来，转载一下，方便查阅。 邮箱的广泛使用得益于它的免费，因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验，很多网站都会实现邮箱输入的自动提示功能。 实现效果如图所示：核心代码（需要jquery的支持）：(function($){$.fn.mailAutoComplete = function(options){var defaults = {boxClass: "m...
之前很少会用javascript去实现页功能主要怕麻烦，但了解JQuery后这种想法发生了变化；有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来，这样编写高重用性的脚本就更方便。下面就是介绍在学习JQuery过程中编写的基于Ajax的数据查询、排序和分页功能的复用脚本，只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能。先看下实现功能的代码：/**应用脚本规则： 引用脚本: JQuery脚本和JQuery的form插...
本文实例讲述了jQuery仅用3行代码实现的显示与隐藏功能。分享给大家供大家参考。具体如下： jQuery技术相当好使用，的确可以用很少的代码实现想要的功能，比如这款经常用到的“显示”与“隐藏”的功能，只需要3行代码就实现了，确实够给力。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-simple-hide-show-style-demo/ 具体代码如下：3行代码实现显示与隐藏.showmore{ float:left;}.cont .aa {heigh...
jquery 实现全选，反选，全不选等功能，下面直接以例子进行说明。设页面有如下一组复选框和几个相关按钮（全选，反选，全不选等）：苹果 橘子 香蕉 葡萄 则分别实现相关功能的完整代码如下：$(function(){ $('#btn1').click(function(){//全选 $("[name='fruit']").attr('checked','true'); }); $('#btn2').click(function(){//全不选 $("[name='fruit']").removeAttr('checked'); }); $('#btn3').click(function(){//反选 $("...
今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子，希望文章能够对各位有帮助。 例子一 在项目中，有时候需要用户选择城市，但是城市太多，用户选择起来不太方便，所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写。结果示意图如下： 当输入拼音后结果示意图如下： 实现代码如下：实时查询城市通过姓名或拼音简写 北京 大连 上海 济南 广州 金华 武汉 南京 深圳 天津 成都 临沂 长春 杭州...
先给大家展示效果图：点击查看效果图 源码下载 jQuery可调节放大与缩小功能的全屏相册插件zoomVisualizer。文件引用：jQuery(document).ready(function() {$(window).ZoomVisualizer({added: added,removed: removed,object: '#zoom-visualizer',resizeInitial: true,centerThumbs: true,loader: "img/ajax-loader-overlay.gif",sliderOrientation: "vertical",positionZoom: {left: 10,right: 10,top:10,bottom:10}});f...
jQuery-zclip是一个复制内容到剪贴板的jQuery插件，使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Flash的支持，使用时记得安装Adobe Flash Player。 1、jQuery-zclip用法//引入jQuery-zclip相关js及swf文件 /resources/js/jquery.min.js"> /resources/js/jquery.zclip.min.js">$(function(){$("#cp-btn").zclip({path:'/resources/js/ZeroClipboard.swf', //记得把ZeroClipboard.swf引入到项目中...
这篇文章主要介绍了jQuery实现Email邮箱地址自动补全功能代码,涉及jQuery鼠标事件及字符操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下，具体如下：jQuery Email邮箱地址自动补全代码，输入Email时，会自动加入@符号，在输入框中输入“qq”、“Sina”、“163”等等可以看到效果；鼠标经过提示Email时，高亮该条Email，鼠标点击Email时，文本框内容替换成该条Email，并删除提示层.运行效果截图如下：在线演示地址如下：...
一、用到的素材二、代码如下，重点是js部分<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510px;margin:0px auto;border:4px solid #ba1809;} #lottery table{background-color:yellow;} #lottery table td{position:relative;width:190px;height:170px;text-align:center;color:#333;font-i...
邮箱的广泛使用得益于它的免费，因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验，很多网站都会实现邮箱输入的自动提示功能，所有自己也实现了一个，先看下效果吧，觉得效果还行的就拿去核心代码（需要jquery的支持）：(function($){$.fn.mailAutoComplete = function(options){var defaults = {boxClass: "mailListBox", //外部box样式listClass: "mailListDefault", //默认的列表样式focusClass: "mailL...
本文实例讲述了jQuery实现分隔条左右拖动功能的实现代码。分享给大家供大家参考。具体如下： 运行效果截图如下：具体内容如下New Document html, body, div {margin: 0;padding: 0;border: 0;-moz-user-select: none;-webkit-user-select: none;}.gf_s {float: left;width: 4px;cursor: e-resize;background-color: #fff;border: #99BBE8 1px solid;}.gf_s_g {float: left;width: 4px;display: none;cursor: e-resize;position: ab...
实现原理：这里用到了两张图片，一张小图，一张大图。将大图设置为放大镜的背景图片，当鼠标在小图上移动时，同时控制背景大图在放大镜中的位置。两张图片大小最好是等比例的，这样才能达到最佳效果。当没有大图时，则默认为小图本身，这时由于两张图片大小一样，因此放大镜效果不明显，就跟没放大是一样的。此插件用到了html5，css3的一些属性，ie8及以下版本不兼容，放大镜是方形的。 运行效果截图如下：具体代码如下：(function...