jquery创建a_使用SmartGallery（jQuery）创建有吸引力的照相馆

于 2020-08-05 12:51:19 发布
阅读量170 收藏
点赞数
文章标签： 列表 html js css python ViewUI
原文链接：https://www.script-tutorials.com/creating-photo-gallery-using-smartgallery-jquery/
版权

jquery创建a

SmartGallery photo gallery
SmartGallery photo gallery

Creating photo gallery using SmartGallery (jQuery) Today we continue our overview of available photo galleries. The next gallery is SmartGallery. This is light-weight gallery that allows us to have thumbnail navigation, auto image scaling, 12 transition effects (at the current moment). Everything is controlled by a options of this gallery. By default, the gallery expects that all the necessary HTML structure is prepared (with necessary images). Our task is to create a script that will automatically load the necessary sets of images (as you may remember – our main goal is to display pictures of different members). This gallery requires the JQuery library ($. get function).

使用SmartGallery(jQuery)创建照片库今天，我们继续对可用照片库进行概述。 下一个画廊是SmartGallery。 这是一个轻量级的图片库，使我们能够进行缩略图导航，自动图像缩放，12种过渡效果(当前)。 一切都由该画廊的选项控制。 默认情况下，图库期望所有必要HTML结构都已准备好(带有必要的图像)。 我们的任务是创建一个脚本，该脚本将自动加载必要的图像集(您可能还记得–我们的主要目标是显示不同成员的图片)。 此库需要JQuery库($。get函数)。

First of all – you can test the demo:

首先–您可以测试演示：

现场演示

Now, let’s start coding !

现在，让我们开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML. This is source code of our sample:

和往常一样，我们从HTML开始。 这是我们示例的源代码：

index.html (index.html)

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/smart-gallery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<div class="example">
    <h3><a href="#">SmartGallery example</a></h3>
    <div class="smart_gallery"></div>
</div>


<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/smart-gallery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<div class="example">
    <h3><a href="#">SmartGallery example</a></h3>
    <div class="smart_gallery"></div>
</div>

As you can see – the gallery <div class="smart_gallery"></div> is empty. We will load imaged dynamically.

如您所见–图库<div class =“ smart_gallery”> </ div>为空。 我们将动态加载图像。

步骤2. CSS (Step 2. CSS)

The following CSS file contains styles of our demo and the gallery:

以下CSS文件包含我们的演示和库的样式：

css / main.css (css/main.css)

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:572px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
/*SmartGallery styles*/
.min-gallery
{
  width:572px;
  height:465px;
  border:solid 1px black;
  background-color:Black;
  background:url(../images/bg.jpg);
  margin:auto;
}
.min-gallery .preview
{
  width:500px;
  height:335px;
  margin-top:36px;
  margin-left:36px;
  margin-right:36px;
  position:relative;
  border:solid 2px black;
  overflow:hidden;
  background-color:White;
}
.min-gallery .preview img
{
  position:absolute;
}
.min-gallery .bottom
{
  width:100%;
  height:98px;
  color:Gray;
  font-family:Arial;
  font-size:1em;
  font-weight:bold;
  overflow:hidden;
}
.min-gallery .bottom .long
{
  width:100%;
}
.close
{
  text-align:center;
  color:white;
  font-family:Verdana;
  font-size:10px;
  font-weight:normal;
  text-transform:uppercase;
  cursor:pointer;
  width:100%;
  padding:4px;
}
.min-gallery .bottom .short
{
  width:100%;
  height:100%;
}
.min-gallery .bottom .short .left
{
  padding-left:5%;
  padding-top:42px;
  width:35%;
  float:left;
}
.min-gallery .bottom .short .middle
{
  width:20%;
  float:left;
}
.min-gallery .bottom .short .right
{
  width:35%;
  float:left;
  text-align:right;
  padding-right:5%;
  padding-top:42px;
}
.min-gallery .bottom .short .middle > div
{
  float:left;
}
.short-thumbnail-container
{
  width:36px;
  padding-top:30px;
  cursor:pointer;
}
.gallery-nav-left
{
  cursor:pointer;
  width:12px;
  margin-right:25px;
  height:18px;
  background-image:url(../images/arrow-left.png);
  background-repeat:no-repeat;
  background-position:center;
  margin-top:40px;
}
.gallery-nav-right
{
  width:12px;
  margin-left:25px;
  height:18px;
  cursor:pointer;
  background-image:url(../images/arrow-right.png);
  background-repeat:no-repeat;
  background-position:center;
  margin-top:40px;
}
.thumbnail-button
{
  width:8px;
  height:8px;
  margin:2px;
  background-image:url(../images/box.jpg);
  float:left;
}
.active-image
{
  z-index:100;
  display:block;
}
.inactive-image
{
}
.gallery-caption
{
  position:absolute;
  width:100%;
  height:100px;
  background-color:Black;
  widht:100%;
  z-index:102;
  color:gray;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter:alpha(opacity=70);
  -moz-opacity:0.7;
  -khtml-opacity:0.7;
  opacity:0.7;
  padding:8px;
}
.thumbnails
{
  width:420px;
  margin:auto;
  padding:0;
  padding:22px 0px 0px 0px;
  position:relative;
}
.thumbnails-back, .thumbnails-forward
{
  float:left;
  width:13px;
  height:40px;
  position:relative;
  top:6px;
  cursor:pointer;
}
.thumbnails-back
{
  background-image:url(../images/arrow-left.png);
  background-repeat:no-repeat;
  background-position:left;
}
.thumbnails-forward
{
  background-image:url(../images/arrow-right.png);
  background-repeat:no-repeat;
  background-position:right;
}
.thumbnails-contents
{
  width:390px;
  height:48px;
  float:left;
  position:relative;
  overflow:hidden;
}
.thumbnails-contents > div
{
  position:absolute;
  width:100%;
}
.thumbnails-contents > div > div
{
  float:left;
}
.thumbnails-contents img
{
  width:43px;
  height:43px;
  margin-left:9px;
  margin-right:9px;
  border:solid 2px black;
}
.hidden
{
  display:none;
}
.visible
{
  display:block;
}
.thumbnail-active
{
  filter:alpha(opacity=100);
  opacity:1.0;
  cursor:pointer;
}
.thumbnail-inactive
{
  filter:alpha(opacity=50);
  opacity:0.5;
  cursor:pointer;
}
.thumbnail-text
{
  color:#7A7677;
  font-weight:bold;
  text-align:left;
  display:block;
  padding:10px 2px 2px 0px;
}
.clear-fix
{
  clear:both;
}


body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:572px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
/*SmartGallery styles*/
.min-gallery
{
  width:572px;
  height:465px;
  border:solid 1px black;
  background-color:Black;
  background:url(../images/bg.jpg);
  margin:auto;
}
.min-gallery .preview
{
  width:500px;
  height:335px;
  margin-top:36px;
  margin-left:36px;
  margin-right:36px;
  position:relative;
  border:solid 2px black;
  overflow:hidden;
  background-color:White;
}
.min-gallery .preview img
{
  position:absolute;
}
.min-gallery .bottom
{
  width:100%;
  height:98px;
  color:Gray;
  font-family:Arial;
  font-size:1em;
  font-weight:bold;
  overflow:hidden;
}
.min-gallery .bottom .long
{
  width:100%;
}
.close
{
  text-align:center;
  color:white;
  font-family:Verdana;
  font-size:10px;
  font-weight:normal;
  text-transform:uppercase;
  cursor:pointer;
  width:100%;
  padding:4px;
}
.min-gallery .bottom .short
{
  width:100%;
  height:100%;
}
.min-gallery .bottom .short .left
{
  padding-left:5%;
  padding-top:42px;
  width:35%;
  float:left;
}
.min-gallery .bottom .short .middle
{
  width:20%;
  float:left;
}
.min-gallery .bottom .short .right
{
  width:35%;
  float:left;
  text-align:right;
  padding-right:5%;
  padding-top:42px;
}
.min-gallery .bottom .short .middle > div
{
  float:left;
}
.short-thumbnail-container
{
  width:36px;
  padding-top:30px;
  cursor:pointer;
}
.gallery-nav-left
{
  cursor:pointer;
  width:12px;
  margin-right:25px;
  height:18px;
  background-image:url(../images/arrow-left.png);
  background-repeat:no-repeat;
  background-position:center;
  margin-top:40px;
}
.gallery-nav-right
{
  width:12px;
  margin-left:25px;
  height:18px;
  cursor:pointer;
  background-image:url(../images/arrow-right.png);
  background-repeat:no-repeat;
  background-position:center;
  margin-top:40px;
}
.thumbnail-button
{
  width:8px;
  height:8px;
  margin:2px;
  background-image:url(../images/box.jpg);
  float:left;
}
.active-image
{
  z-index:100;
  display:block;
}
.inactive-image
{
}
.gallery-caption
{
  position:absolute;
  width:100%;
  height:100px;
  background-color:Black;
  widht:100%;
  z-index:102;
  color:gray;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter:alpha(opacity=70);
  -moz-opacity:0.7;
  -khtml-opacity:0.7;
  opacity:0.7;
  padding:8px;
}
.thumbnails
{
  width:420px;
  margin:auto;
  padding:0;
  padding:22px 0px 0px 0px;
  position:relative;
}
.thumbnails-back, .thumbnails-forward
{
  float:left;
  width:13px;
  height:40px;
  position:relative;
  top:6px;
  cursor:pointer;
}
.thumbnails-back
{
  background-image:url(../images/arrow-left.png);
  background-repeat:no-repeat;
  background-position:left;
}
.thumbnails-forward
{
  background-image:url(../images/arrow-right.png);
  background-repeat:no-repeat;
  background-position:right;
}
.thumbnails-contents
{
  width:390px;
  height:48px;
  float:left;
  position:relative;
  overflow:hidden;
}
.thumbnails-contents > div
{
  position:absolute;
  width:100%;
}
.thumbnails-contents > div > div
{
  float:left;
}
.thumbnails-contents img
{
  width:43px;
  height:43px;
  margin-left:9px;
  margin-right:9px;
  border:solid 2px black;
}
.hidden
{
  display:none;
}
.visible
{
  display:block;
}
.thumbnail-active
{
  filter:alpha(opacity=100);
  opacity:1.0;
  cursor:pointer;
}
.thumbnail-inactive
{
  filter:alpha(opacity=50);
  opacity:0.5;
  cursor:pointer;
}
.thumbnail-text
{
  color:#7A7677;
  font-weight:bold;
  text-align:left;
  display:block;
  padding:10px 2px 2px 0px;
}
.clear-fix
{
  clear:both;
}

步骤3. JS (Step 3. JS)

The following JS file initializes the gallery:

以下JS文件初始化图库：

js / main.js (js/main.js)

jQuery(window).load(function() {
    $.get('feed.php', function(data){
        $('.smart_gallery').append(data);
        $('.smart_gallery').gallery({
            random: true,
            circular: true,
            masked: true,
            animation: "blind",
            noofthumbnails: 6,
            thumbnailscrollspeed: 2000,
            animationspeed: 1000,
            stickthumbnails: true,
            imagedisplaytime: 3000
        });
    });
});


jQuery(window).load(function() {
    $.get('feed.php', function(data){
        $('.smart_gallery').append(data);
        $('.smart_gallery').gallery({
            random: true,
            circular: true,
            masked: true,
            animation: "blind",
            noofthumbnails: 6,
            thumbnailscrollspeed: 2000,
            animationspeed: 1000,
            stickthumbnails: true,
            imagedisplaytime: 3000
        });
    });
});

Well, when the page is loaded, it begins loading additional information (about custom images) from feed.php file using jQuery. Then, the received data goes (append) directly inth the $(‘.smart_gallery’). Finally – it invokes the initialization of our gallery with necessary params. Full list of possible parameters is provided in the end of the article.

好了，页面加载后，它开始使用jQuery从feed.php文件中加载其他信息(关于自定义图像)。 然后，接收到的数据直接(附加)到$('。smart_gallery')中。 最后–它使用必要的参数调用画廊的初始化。 文章结尾提供了可能的参数的完整列表。

js / jquery-1.5.2.min.js和js / smart-gallery.min.js (js/jquery-1.5.2.min.js and js/smart-gallery.min.js)

This is main jQuery library with gallery plugin. It is available in our package.

这是带有图库插件的主要jQuery库。 它在我们的包装中。

步骤4. PHP (Step 4. PHP)

The following file is the data generator of our images:

以下文件是我们图像的数据生成器：

feed.php (feed.php)

<?
// define template for gallery
$sImageTemplate = <<<HTML
<a href="{fileurl}" title="{title}"><img src="{fileurl}" /></a>
HTML;
$sImages = '';
$sFolder = 'data_images/';
$aUnits = array( // obtaining array of used images
    'pic1.jpg' => 'Image 1', 'pic2.jpg' => 'Image 2', 'pic3.jpg' => 'Image 3', 'pic4.jpg' => 'Image 4',
    'pic5.jpg' => 'Image 5', 'pic6.jpg' => 'Image 6', 'pic7.jpg' => 'Image 7', 'pic8.jpg' => 'Image 8',
    'pic9.jpg' => 'Image 9', 'pic10.jpg' => 'Image 10'
);
foreach ($aUnits as $sFileName => $sTitle) { // preparing images data
    $sImages .= strtr($sImageTemplate, array('{fileurl}' => $sFolder . $sFileName, '{title}' => $sTitle));
}
echo $sImages;
?>


<?
// define template for gallery
$sImageTemplate = <<<HTML
<a href="{fileurl}" title="{title}"><img src="{fileurl}" /></a>
HTML;
$sImages = '';
$sFolder = 'data_images/';
$aUnits = array( // obtaining array of used images
    'pic1.jpg' => 'Image 1', 'pic2.jpg' => 'Image 2', 'pic3.jpg' => 'Image 3', 'pic4.jpg' => 'Image 4',
    'pic5.jpg' => 'Image 5', 'pic6.jpg' => 'Image 6', 'pic7.jpg' => 'Image 7', 'pic8.jpg' => 'Image 8',
    'pic9.jpg' => 'Image 9', 'pic10.jpg' => 'Image 10'
);
foreach ($aUnits as $sFileName => $sTitle) { // preparing images data
    $sImages .= strtr($sImageTemplate, array('{fileurl}' => $sFolder . $sFileName, '{title}' => $sTitle));
}
echo $sImages;
?>

The code is fairly simple, in the begining – it is template for the image list, then – it walks through the images, makes replacements, and then – it prints the result of our list (back to JS function)

首先，代码很简单–它是图像列表的模板，然后–遍历图像，进行替换，然后–打印列表的结果(返回JS函数)

步骤5.图片 (Step 5. Images)

Our SmartGallery gallery uses next image files:

我们的SmartGallery图库使用下一个图像文件：

该库的所有可能参数(当前)的表： (Table with all possible params (at the current moment) of this gallery:)

ParamTypeDefaultDescription
randombooleantrueIf you going to use single transition, set to ‘false’
circularbooleantrueIs thumb gallery circular?
maskedbooleantrueAll images in thumbs line will have mask, and, onhover – mask disappear
animationstringblindTransition effect (fadein, blind, fallingbars, appear, fillin, explode, jumble, risingbars, paint, diagonal, crunchingbars, slidein)
noofthumbnailsint6Amount of thumbs displayed in time
thumbnailscrollspeedint2000Speed, where thumbnails scroll back and forth (ms)
animationspeedint1000Speed of animation (ms)
stickthumbnailsbooleanfalseIn case of false – bar with thumbnails will closing automatically
imagedisplaytimeint3000Time of displaying of single image (ms)
参数 类型 默认 描述
随机 布尔值 真正 如果要使用单一过渡，请设置为“ false”
圆 布尔值 真正 拇指画廊是圆形的吗？
蒙面的 布尔值 真正 大拇指线上的所有图像都将带有蒙版，并且悬停–蒙版消失
动画 串 盲 过渡效果(淡入淡出，瞎眼，下降条，出现，填充，爆炸，混乱，上升条，油漆，对角线，拐杖，滑动条)
非缩略图 整型 6 及时显示的拇指数量
缩略图滚动速度 整型 2000 速度，缩略图来回滚动(毫秒)
动画速度 整型 1000 动画速度(毫秒)
指甲贴 布尔值 假 如果为假-带缩略图的栏将自动关闭
影像显示时间 整型 3000 单张图像显示时间(毫秒)
现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

结论 (Conclusion)

Today we explained how to build the new jQuery gallery. I’m sure, that you will be happy to use it in your projects. Good luck!

今天，我们解释了如何构建新的jQuery库。 我敢肯定，您会很高兴在项目中使用它。 祝好运！

翻译自: https://www.script-tutorials.com/creating-photo-gallery-using-smartgallery-jquery/

jquery创建a

cuke3186
关注
jQuery创建元素节点
bakelFF的博客
12-28 2919
在 jQuery 中，我们可以采用字符串的形式来创建一个元素节点，再通过 append( )、before( ) 等方法把这个字符串插入到现有的元素节点中。 语法： /方式1 var str = "字符串"; $().append(str); //方式2 $().append("字符串") append( ) 方法表示把一个新元素插入到父元素内部的子元素的“末尾”。 举例：创建简单元素 <!DOCTYPE html> <html> <head> <
jQuery中元素的创建
ln201009的博客
05-07 5740
1、我们先说单个元素的创建，在一个div盒子里创建一个a标签，我们就需要先写入一个按钮和一个div盒子。如下图所示，要实现的功能就是点击按钮在盒子内创建一个a标签。 2、我们想要的功能需要通过jQuery来实现，所以先引入一个jQuery的插件，然后写一个script标签来写jQuery代码块。 3、首先我们先写一个页面加载事件，在jQuery中的页面加载事件是一个$符号然后一个小括号，小括号里面写function。 4、页面加载完成后，要写的就是按钮点击事件，首先我们要先获取到按钮.
SmartPhoto-jquery移动手机响应式图片查看插件
12-11
SmartPhoto是一款为移动手机量身打造的响应式图片查看jquery插件。它使用简单，在桌面设备中点击图片时会以Lightbox的方式来展示图片。在移动手机的小屏幕中，会以轮播图的方式来展示图片。
jQuery Image Gallery
04-24
jQuery Image Gallery
jquery-tiles-gallery:jQuery Tiles画廊
05-18
已淘汰 该软件包已不再维护。 它是凉亭中不可用的温室tilesgallery的副本，已移植到该存储库中的凉亭中。 由于原始来源不再可用，因此该软件包也不再维护。 安装 将jquery.tilesgallery.js放入网站的js /文件夹中，并将jquery-tilesgallery.css放入网站的css /文件夹中。 将这些文件包含在页面的顶部，请确保还包含jQuery的更新版本： < html > < head > .... < script src =" path/to/jquery " type =" text/javascript " > </ script > < script src =" /js/jquery.tilesgallery.js " type =" text/javascript " > </ script > < link href =" /
photoGallery:这是一个关于photoGallery的jQuery插件
05-18
photoGallery this is a jQuery plugin about photoGallery. 使用很简单： --class="photoGallery":标识获取图片 --data-src:大图的路径 --data-id:图片的id --data-desc:图片的描述
jquery-photo-gallery.zip
08-01
图片预览插件，支持图片放大、旋转、下载，jquery-photo-gallery，亲测兼容IE8浏览器
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
1. 2款jQuery图片自动切换常用广告代码 2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. ...
jquery.tablednd_0_5.js
12-09
jquery.tablednd_0_5.js
jquery_api_1.9
02-03
jQuery API 1.9 英文版 求高人翻译。 我费了好大的劲从网上下载下来整理好的。
gallery:幻灯片的 jQuery 插件
06-08
#Gallery 使用 HTML CSS 和 jQuery ##Description Gallery 是一个包含一些有趣幻灯片的网站。 ##Setup 将 CSS 和 JS 目录复制到您的网站。 您可以根据需要更改图像并添加其他模块。 定制很简单！ 玩得开心！ 1.Page1使用jquery创建dom。 所以它是紧密耦合的，难以测试和修改。 这是糟糕的代码风格。 2.Page2更容易理解。你可以用你的图片网址改变图片网址并选择你喜欢的过滤器，只需将对象{过滤器：值}传递给函数。 你也可以添加你的过滤器。 由于画布元素，在您的个人计算机上测试时它可能会失败。 你可以用火狐测试。
gallery:jQuery 画廊组件
06-24
画廊 jQuery 画廊组件。 安装 安装开发和生产依赖项： npm install 使用 gulp 运行任务； 默认任务包括一个可以通过运行启动的gulp-connect服务器： gulp 这将通过访问http://localhost:8080使/demo文件在浏览器中可用
xZoom：jQuery Zoom Gallery插件
02-03
缩放 jQuery Zoom Gallery插件。 从版本1.2.6开始支持jQuery。 选项，效果，易于使用和自定义 轻量级〜14kb缩小版本。 您可以分别加载低分辨率和高分辨率图像。 支持IE6 +，Chrome，FireFox，Opera，Safari，Android，iOS 支持响应输出。 有一个API与其他有用的插件集成，例如 ， 和 。 安装 使用以下方法之一： git clone git@github.com:payalord/xZoom.git git clone https://github.com/payalord/xZoom.git npm insta
jQuery做的相册，Gallery
02-26
jQuery做的相册，图片查看器，好用，可在Web开发中使用
PhotoGallery:PhotoGallery 是一个独立的 JavaScript 插件，用于创建简单的照片画廊
07-18
照片库 还可以查看 ！ PhotoGallery 是一个独立的 JavaScript 插件，用于创建简单的照片画廊。 安装 要将 PhotoGallery 包含在 HTML 网页中，请从此 GitHub 存储库下载photogallery.min.js ，并将此标记添加到您的标题中（使用photogallery.min.js的path/to/photogallery.min.js代替path/to/photogallery.min.js ）： [removed][removed] 用法 要使用 PhotoGallery 创建照片库，请创建一个带有class="photo-gallery"的<div>元素，并将所有图像作为<div>包含在class="gallery-image"并将图像源作为data-src="path
基于jquery的相册预览gallery
dasuo1170的博客
04-03 128
众多有图片的产品，都要加个图片预览功能。然后市面上就出现了各种各样的相册，下面也提供一个基于jquery的相册。 源码：https://github.com/lilyH/gallery 版本: v0.1版 功能：（1）支持鼠标点击，键盘左右的图片下一张，下一张 （2）支持屏幕缩放的时候，重新计算图片的位置，保证图片位置屏幕的中间 样子: 功能还比较简单，希...
使用jquery灯箱插件显示图片gallery
BetterBOB的专栏
11-22 1852
* { margin:0; padding:0; } $(document).ready(function() { $('.test-popup-link').magnificPopup({type:'image'}); //单个图片显示 $('.image-link').magnificPopup({type:'image',zoom: { enabled: tr
photoGallery.js:使用 Javascript（无框架的 MVC）和 Flickr API 的照片库
07-21
图片库.js 这是一个关于在没有任何 JavaScript 框架的情况下使用 MVC 设计模式的小型研究。 它基于。 另外，我使用了一小部分。 基于CSS。
10个高级jQuery Image Gallery插件
01-17 281
世界上最好的jQuery图片廊插件的集合，主要是托管在CodeCanyon。 请享用。 1. RoyalSlider - 触摸功能的jQuery图片廊 RoyalSlider易于使用jQuery的图片库和内容滑块插件与动画字幕，响应布局和移动设备的触摸支持。 2. Megafolio画廊jQuery插件 Megafolio是一个高度可定制的jQuery插件出示您的画廊或投资组合。 ...
创建jQuery插件：NumberFormatter
"使用jQuery（中级），第2部分: 创建自己的插件" 在深入探讨创建jQuery插件的过程中，首先要理解jQuery的核心价值在于其强大的API和丰富的生态系统，其中包括各种各样的插件。这些插件能够极大地提升开发者的工作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值