首页 前端知识 Bootstrap/jQuery组件/jQThumb缩略图插件的介绍与下载

Bootstrap/jQuery组件/jQThumb缩略图插件的介绍与下载

2024-08-30 20:08:34 前端知识 前端哥 995 429 我要收藏

 Bootstrap

1.Bootstrap是一款优秀的前端库。包含了:

基本结构:包括基本样式。

CSS

组件:可用于创建下拉菜单、导航、弹出框等。

jQuery插件

 2.下载方法

 https://v3.bootcss.com/getting-started/#download

 

选择下载源码,下载后解压。
找到dist文件夹,复制里面的css、fonts、js三个文件夹。

 

jQuery组件

1.jQuery是一个快速、简洁的JavaScript框架

2.下载方法

https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js

按Ctrl+S组合键进行保存为jquery.min.js文件,放到js子文件夹中。

3.导入方法

在html文件中

<script src="{% static 'js/jquery.min.js' %}"></script>

jQThumb缩略图插件

1.解决图片对齐显示问题,可以按照设定的比例、尺寸、位置等属性来生成新的缩略图。

2.下载方法

在https://github.com/pakcheong/jqthumb下载

解压后在根目录下的dist文件夹中将jqthumb.min.js文件复制到js子文件夹中

3.引入方法

在html中添加引用 

<script src="{% static 'js/jqthumb.min.js' %}"></script>

 调用DrawImage()函数处理缩略图

DrawImage()函数正是基于jqthumb.min.js库的

<script>
  //处理缩略图
  function DrawImage(hotimg) {
    $(hotimg).jqthumb({
        ...
    });
  }
</script>

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17227.html
标签
评论
发布的文章

npm install 报错解决记录

2024-09-09 00:09:08

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!