本文实例讲述了jQuery实现可拖拽的许愿墙效果。分享给大家供大家参考，具体如下： 运行效果图如下：这里简单介绍下功能点： ① 随机显示背景图或背景色 ② 出现的位置随机 ③ 可以通过拖拽改变位置 好了，附上代码： <!doctype html> <html lang="en"> <head><meta charset="UTF-8"/><title>许愿墙</title><link rel="stylesheet" href="base.min.css"/><style>#wish{height:650px;margin:20px;position:relative;width:960px;}.wi...
本文实例讲述了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...
本文实例讲述了JS实现可编辑的后台管理菜单功能。分享给大家供大家参考，具体如下： <!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>JS可编辑后台菜单</title> <style type="text/css"> body {font-size: 12px;...
本文实例讲述了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结构我们分三部分，第一是产品列表部分，展示所有可以对比的产品。我们以某手机网站为例，简单的结构，只需展示产品图片和名称，以及一个添加按钮。注...
前言 HTTP实现文件下载时，只要在服务器设置好相关响应头，并使用二进制传输文件数据即可，而客户端(浏览器)会根据响应头接收文件数据。而在Node.js中，设置好响应头后，读取文件流，再使用“.pipe()”方法将流转接到响应对象Response就可以实现一个简单的文件下载服务器。 1. 文件下载介绍 HTTP基于请求头和响应头实现状态交互，在得到服务器正确响应状态后，而客户端首先会解析响应头，并根据响应头来接收和展示数据（响应体）。...
本文实例讲述了js实现的页面加载完毕之前loading提示效果。分享给大家供大家参考，具体如下： 一、JS代码： //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight,_PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px） var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,_LoadingLeft = _PageWid...
本文实例讲述了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...
本文实例讲述了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...