本文实例讲述了jQuery实现带遮罩层效果的blockUI弹出层。分享给大家供大家参考，具体如下： 首先先附上代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>blockUI（弹出层）</title><style type="text/css">#d...
本文实例讲述了jQuery实现的超链接提示效果。分享给大家供大家参考，具体如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <style type="text/css"> *{margin:0;padding:0;} ul li{ list-style:none;} img {border:0 none;} body {padding:100px;} .tooltip{position:absolute;display:none;border:1px solid #333; border-radius:8px; box-shadow:0 ...
产品对比相信大家并不陌生，为了方便用户对类似产品的相关信息进行有效直观的对比，一些电商网站产品或评测网站会为用户提供产品对比的功能，用户只需勾选多个需要对比的产品，就可以进行比对。本文将使用jQuery来给大家讲解如何实现产品对比功能。查看演示 下载源码 HTML HTML结构我们分三部分，第一是产品列表部分，展示所有可以对比的产品。我们以某手机网站为例，简单的结构，只需展示产品图片和名称，以及一个添加按钮。注...
本文实例讲述了jQuery实现的表头固定效果。分享给大家供大家参考，具体如下： 运行效果截图如下：具体实现步骤如下： 一、新建一js文件jQuery_FixedTableHead.js 内容如下： jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) {var obj = document.getElementById("tableHeaderDiv" + tableId);if (obj) {jQuery(obj).remove();}var browserName = navigator.appName;var ver = navigator.appVersion;var browser...
先给大家展示下效果图，喜欢的朋友可以下载源码哦效果演示 源码下载<section class="main"><div class="wrapper-demo"><div id="dd" class="wrapper-dropdown-1" tabindex="1"><span>手册网</span><ul class="dropdown" tabindex=""><li><a href="#">jQuery特效</a></li><li><a href="#">网站模板</a></li></ul></div></div></section> </div> <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquer...
本文实例讲述了jQuery悬停文字提示框插件jquery.tooltipster.js用法。分享给大家供大家参考，具体如下： 运行效果截图如下：index.html页面： <!DOCTYPE html> <html lang="en"> <head> <title>jQuery Tooltips悬停文字提示框效果</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> <link rel="stylesheet" type="text/css" href="css/style2.css" /> <script type="text/j...
乍一听有点蒙，之前用ng和react时也写过类似的功能，但是很顺利（所以忘记具体细节了）。jquery为啥会不行呢？看了一下具体场景，发现原来jq的ajax回调已经把response的数据傻瓜式的以字符串的方式解析了。 查了一下gg，发现国内的解决方案就是在该场景下不实用jq，而是自己手动创建XMLHttpRequest。虽然这个方法很可靠，但之前封装的jq的ajax就不能使用了。 查了查jq的文档，本打算自己根据jq提供的jQuery.ajaxSetup()接口来拓展数...
本文实例讲述了jQuery实现可以编辑的表格。分享给大家供大家参考，具体如下： 今天小编主要给大家讲解一下，如何利用jQuery+js+css实现表格的编辑。接下来，小编就简单总结一下如何实现这个小例子。 第一步：编写html代码，代码如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>JQuery实例2：可以编辑的表格</title><meta http-equiv="Con...
本文实例讲述了jQuery实现的纵向下拉菜单。分享给大家供大家参考，具体如下： 当我们浏览网页和使用word编辑一下文字的时候，我们都能看见横向下拉的身影，有了横向菜单，我们能对整个界面进行更好的布局，达到我们想要的效果，那么这些横向菜单式如何用代码实现的，当我们浏览或使用的时候她又是如何呈现在我们面前的，学习了JQuery之后，小编渐渐看到她美丽的容颜，接下来，小编主要讲解如何通过jquery实现纵向下拉菜单。 第一步...
这里延迟加载的意思是，拖动滚动条时，在图片出现在浏览器显示区域后才加载显示。在这之前全部图片都由一张图片代替。节省流量，减轻服务器负担。 请用鼠标或者键盘方向键使页面向下滚动，注意图片的变化。本特效没有使用专门的图片延迟加载插件，只需要一小段jQuery代码就实现了图片延迟加载，使用非常方便。在本文后面附有源码下载。效果展示 源码下载 用到的加载中的图片： 代码如下：<!DOCTYPE html> <html> <head> <met...
本文实例讲述了jQuery实现对无序列表的排序功能。分享给大家供大家参考，具体如下： 利用jQuery对无序列表排序的原理是：获取到无序列表中的所有列表项，并转成数组形式，使用JavaScript函数对其进行排序后再次输出。其中使用到的jQuery函数有ready()、get()、text()、each()、append()和JavaScript函数sort()。 1．jQuery函数介绍 （1）jQuery函数get()--获取匹配元素集合 该函数取得所有匹配元素的一种向后兼容的方式（不同于jQu...
内容滑动切换应用非常广，常见的有幻灯片焦点图、画廊切换等。随着WEB前端技术的广泛应用，内容滑动切换效果占据着web页面重要地位，因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程。 先给大家展示下效果图，感觉还不错请参数实现代码，具体效果如下所示：效果展示 源码下载 本次教程分三个部分： 1、使用jQuery开发基本的内容滑动切换效果， 2、支持移动端触控自适应的内容滑动切换效果，...
今天我们继续内容滑动切换效果的第二部分讲解。如今我们的web开发都要适应移动设备，就是说我们的web页面要在移动设备如手机端也能正常访问，所以我将第一部分的基本切换效果做了加强，增加了响应式和触控滑动效果。效果展示 源码下载 本文是hwSlider-内容滑动切换效果的第二部分，演示DEMO都是基于第一部分内容的基础上的，所以，如果您还没阅读过第一部分的话，请先移步参阅：基于jQuery和hwSlider实现内容左右滑动切换效果附...
本文实例讲述了jQuery动态添加可拖动元素的方法。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下： index.html： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>流程设计器</title> <script type = "text/javascript" src = "jquery-1.7.2.min.js"> </script> <scr...
本文实例讲述了jQuery实现响应鼠标事件的图片透明效果。分享给大家供大家参考，具体如下： 实现的思想： 1、当鼠标放在图片上面的时候触发mouseover mouseenter两个事件（图片变得透明） 2、当鼠标离开图片的时候触发mouseleave mouseout两个事件（图片变为不透明） 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt...