本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}/*#piclist {width: 600px;height: 600px;background-color: green;}*/.nitem {/*width: 200px;*//*height: 200px;*/float: left;background: url(img/meinv.jpg) 0px 0px no-repeat;-webkit-background-size: 600px 600p...
本文实例讲述了jQuery+C#实现参数RSA加密传输功能。分享给大家供大家参考,具体如下: 注意: 参数传递的+号处理,在传输时会把+变成空格,不处理后端就报错了。 1、前端代码 <!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width" /><title>Login</title><script src="jquery-1.10.2.min.js"></script><script src="jsencrypt.min.js"></script><script type="text/javascript">$(function () {var e...
jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制皮肤。而且浏览器兼容性非常好,支持多种时间格式。查看演示 下载源码 准备 使用该日期选择器插件需要 jQuery 1.3.2+和Moment 2.2.0+的支持。 <link rel="stylesheet" href="css/daterangepicker.css" rel="external nofollow" /> <script src="js/moment.min....
本文实例讲述了jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法。分享给大家供大家参考,具体如下: jquery.eraser是一款使用鼠标或触摸的动作来擦除画布显示真正图片的插件。jquery.eraser插件的原理是用一个画布遮住图片,然后根据触摸或鼠标输入来擦除画布显示图片,您可以在参数中指定一个回调函数设置画笔大小。 使用需知: 必须确保图片是完全加载之后调用eraser(),否则它不会工作。插件正常运行在Safari,Chrome OS X和...
本文实例讲述了jQuery实现的动态文字变化输出效果。分享给大家供大家参考,具体如下: 演示效果图如下:1、完整实例代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>jQuery制作动态文字变化输出效果</title><link rel="stylesheet" href="css/reset.css" rel="externa...
本文实例讲述了jQuery插件FusionCharts绘制ScrollColumn2D图效果。分享给大家供大家参考,具体如下: 1、index.html页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FusionCharts ScrollColumn2D图</title> <script type="text/javascript" src="js/jquery-1.7.2...
本文实例讲述了jQuery插件FusionWidgets实现的Bulb图效果。分享给大家供大家参考,具体如下: 1、数据源提供 Bulb.xml: <?xml version="1.0" encoding="UTF-8"?> <chart lowerLimit="0" upperLimit="100" caption="收入" numberPrefix="$" numberSuffix="K" showValue="1"><colorRange><color minValue="0" maxValue="10" code="AA8989"/><color minValue="10" maxValue="20" code="549485"/><color minValue="20" maxValue="30" ...
本文实例讲述了jQuery插件HighCharts实现的2D面积图效果。分享给大家供大家参考,具体如下: 1、实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D面积图</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript">$(function(){$(#areaChart).highcharts({chart: ...
本文实例讲述了jQuery插件HighCharts实现的2D堆条状图效果。分享给大家供大家参考,具体如下: 1、HighCharts之2D堆条状图源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D堆条状图</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript"> $(function(){$(#stackedBa...
本文实例讲述了jQuery插件HighCharts绘制的2D堆柱状图效果。分享给大家供大家参考,具体如下: 1、HighCharts之2D堆柱状图源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D堆柱状图</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript"> $(function(){$(#stackedCh...
本文实例讲述了jQuery插件HighCharts实现的2D条状图效果。分享给大家供大家参考,具体如下: 1、实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D条状图</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript"> $(function(){$(#barChart).highcharts({chart: ...
本文实例讲述了jQuery插件HighCharts绘制2D带有Legend的饼图效果。分享给大家供大家参考,具体如下: 1、实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D带有Legend的饼图</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript">$(function(){// 构建饼图$(#p...
本文实例讲述了jQuery插件HighCharts绘制2D半圆环图效果。分享给大家供大家参考,具体如下: 1、实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D半圆环图</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript">$(function(){$(#halfDonutChart).highcharts({...
本文实例讲述了jQuery插件HighCharts绘制2D金字塔图效果。分享给大家供大家参考,具体如下: 1、实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D金字塔分布图</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/funnel.js"></script> <script typ...
本文实例讲述了jQuery插件HighCharts实现的2D回归直线散点效果。分享给大家供大家参考,具体如下: 1、实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts之2D回归直线的散点</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript">$(function(){$(#scatterLine).hi...