结业项目部分插件介绍

最新推荐文章于 2024-12-10 14:23:12 发布

姜!

最新推荐文章于 2024-12-10 14:23:12 发布

阅读量189

点赞数

分类专栏：新手

本文链接：https://blog.youkuaiyun.com/weixin_39580806/article/details/103073464

版权

新手专栏收录该内容

66 篇文章

订阅专栏

结业项目我用了很多插件
框架就不介绍了，因为大家都会用
swiper 实现轮播的插件
优点：
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
缺点：
与mui底层封装的代码产生冲突
基本结构

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper.min.js"></script>
    ...
</body>
</html>

轮播代码：
HTML结构

 <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <img src="./img/a2.jpg">
                    </li>
                    <li class="swiper-slide">
                        <img src="./img/a3.jpg">
                    </li>
                    <li class="swiper-slide">
                        <img src="./img/a4.jpg">
                    </li>
                    <li class="swiper-slide">
                        <img src="./img/c2.jpg">
                    </li>
                    <li class="swiper-slide">
                        <img src="./img/b4.jpg">
                    </li>
                    <li class="swiper-slide">
                        <img src="./img/s71.jpg">
                    </li>
                </ul>
  <div class="swiper-pagination sp01"></div>

css样式

.banner{width: 100%;}
.banner ul li img{width: 100%;display: block;}
.banner .sp01 span{background-color: #fff;opacity: .7;}
.banner .sp01 .swiper-pagination-bullet-active{background-color: white;background-color: #ffe037; opacity: 1;}

js代码

 var swiper = new Swiper('.banner', {
                        pagination: '.sp01',
                        paginationClickable: true,
                        autoplay: "3000",
                        loop: "ture",
                        speed: 500,
                        autoplayDisableOnInteraction: false,
                    });

3. fancybox 弹出窗口的插件
基于jQuery的一款插件
a链接的href可以指向图片和地址，a标签也可以包含图片、inline内容、iframe框架，创建一个链接元素
fancybox中的一些常用参数

  padding          	跟css里的padding差不多意思                
  imageScale       	如果为true，则图片会被缩放以适应窗口              
  zoomOpacity      	如果为true，则在动画过程中内容的透明度会改变          
  overlayShow      	如果为true，则显示遮罩，默认为false            
  overlayOpacity   	遮罩的透明度，值为0--1                     
  centerOnScroll   	值为true的话，当用户滚动页面时，内容会一直居中显示       
  frameWidth/height	iframe和inline框口的默认宽度/高度           
  zoomSpeedIn      	zooming-in动画时的速度，单位为毫秒。0的话动画将不会出现 
  zoomSpeedOut     	zooming-out动画时的速度，单位为毫秒。0的话动画将不会出现
  zoomSpeedChange  	切换图片时的动画速度，单位为毫秒。值为0的话将不会出现动画

方法

 		$.fancybox.showActivity 显示加载动画  
         $.fancybox.hideActivity 隐藏加载动画  
         $.fancybox.close 关闭窗口  
         $.fancybox.resize 自动调整窗口的高度使之与内容相适应