本文实例讲述了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...