web16(ColorBox插件编写)

最新推荐文章于 2024-01-05 00:11:45 发布
最新推荐文章于 2024-01-05 00:11:45 发布
阅读量214 收藏
点赞数
分类专栏： 前端 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44102678/article/details/104907242
版权

自定义插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿colorbox效果的插件</title>
    <style>
        img{
            width: 200px;

        }
    </style>
</head>
<body>

<img src="../images/a1.jpg" data-myColorBox="">
<img src="../images/a2.jpg" data-myColorBox="">
<img src="../images/a3.jpg" data-myColorBox="">
<img src="../images/a4.jpg" data-myColorBox="">
<img src="../images/a5.jpg" data-myColorBox="">
<img src="../images/a6.jpg" data-myColorBox="">
<img src="../images/0.webp" data-myColorBox="">
<img src="../images/1.webp" data-myColorBox="">
<img src="../images/2.webp" data-myColorBox="a">
<img src="../images/3.webp" data-myColorBox="a">
<img src="../images/4.webp" data-myColorBox="">

<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/jQuery.myColorBox-1.0.0.js"></script>
<script>
    $(function () {
        // $('img').myColorBox();
        $.myColorBox();
    })

    // //图片预加载
    // var img = new Image();
    // img.src = 'xxxx';
    //
</script>

</body>
</html>

自定义的json

!(function ($) {
    $.myColorBox = function (userArg) {
        var arg = {

        };

        $.extend(arg,userArg);

        //建立遮罩层
        var maskLayer;
        //建立图片的显示层（遮罩层上面那一层）
        var viewLayer;
        //定义图片容器
        var img;
        //定义原始数据的宽和高的尺寸
        var $width,$height;
        //定义一个宽高
        var _w,_h;


        var imgList = $('[data-myColorBox]');
        // imgList.css({
        //     outline:'1px solid red'
        // });
        imgList.css({
            cursor:'pointer'
        }).hover(function () {
            $(this).css({
                outline:'2px solid blue'
            })
        },function () {
            $(this).css({
                outline:'none'
            })
        })
            //当图片被点击时，所要干的事情
            .click(function () {
                //1判断用于样式的基础元素是否存在，不存在则建立
                if($('myColorBoxMaskLayer').length != 0){
                    maskLayer = $('myColorBoxMaskLayer');
                }else{
                    maskLayer = $('<myColorBoxMaskLayer>').appendTo('body')
                    //当遮罩层被点击时，起到一个关闭图片的效果
                    maskLayer.click(function () {
                        maskLayer.stop().fadeOut();
                        viewLayer.stop().fadeOut();
                        img.stop().fadeOut();

                    })

                }
                //1判断用于样式的基础元素是否存在，不存在则建立
                if($('myColorBoxViewLayer').length != 0){
                    viewLayer = $('myColorBoxViewLayer');
                    img = $('myColorBoxViewLayer img');
                }else{
                    viewLayer = $('<myColorBoxViewLayer>').appendTo('body').css({
                        width:0,
                        height:0,
                        marginLeft:0,
                        marginTop:0
                    });;
                    img = $('<img>').appendTo('myColorBoxViewLayer');

                }




                //2取得原始数据
                //定义一个空的 图片容器
                var $img = new Image();
                //将点击的图片的url赋值给刚刚定义过的乳片容器对象
                $img.src = this.src;
                //onload表示当图片加载完成时，再去取图片的原始值
                $img.onload = function(){
                    $width = $img.width;
                    $height = $img.height;

                    //让图片在保持宽高比的情况下自适应屏幕
                    //得到屏幕的宽和高,然后还要据屏幕有一定的距离
                    var ww = $(window).width()-100;
                    var hh = $(window).height()-100;
                    //定义宽高的比例
                    var bili = $width/$height;
                    if($width>ww||$height>hh){
                        //宽高等比例缩小
                        if(ww/bili<=hh){
                            $width = ww;
                            $height = ww/bili;
                        }else{
                            $height = hh;
                            $width = hh*bili;
                        }
                    }
                    //记录宽度，高度变化的最小值
                    var time = Math.min(Math.abs($width-_w),Math.abs($height-_h));
                    _w = $width;
                    _h = $height;


                    //3.完成动画
                    //遮罩层的处理过程
                    maskLayer.css({
                        position:'fixed',
                        //上下左右为0，样式就会类似于自适应
                        left:0,
                        top:0,
                        right:0,
                        bottom:0,
                        //遮盖层的z轴相对位置
                        zIndex:9998,
                        backgroundColor:'black',
                        //初始状态隐藏
                        display:'none'
                    }).fadeTo(600,.8);
                    //图片的显示层（遮罩层上面那一层）
                    viewLayer.css({
                        position:'fixed',
                        //显示层居中显示：及中点从宽度的一半，高度的一半位置
                        left:'50%',
                        top:'50%',

                        backgroundColor:'white',
                        borderRadius:3,
                        //初始状态隐藏
                        display:'none',
                        //透明度：一开始逐渐显现出来
                        opacity:0,
                        //遮盖层的z轴相对位置
                        zIndex:9999


                    }).show().animate({
                        //透明度和宽度同时变化
                        opacity:1,
                        //8表示两边各多出4px的边框
                        width:$width+8,
                        height:$height+8,
                        borderRadius:3,
                        marginLeft:-($width+8)/2,
                        marginTop:-($height+8)/2
                    },time,function () {
                        img.attr('src',$img.src).css({
                            width:$width,
                            height:$height,
                            border:'4px solid white',
                            borderRadius:3,
                            display:'none'
                        }).fadeIn()
                    });
                };

            });
    }
})(jQuery);

效果图：
在这里插入图片描述

自定义动画队列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义简历</title>
    <style>
        #box ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #box{
            width: 1000px;
            margin: 10px auto;
            border: 1px solid black;
        }
        #box1,#box2{
            width: 250px;
            height: 200px;
            display: inline-block;
        }
        #box2 ol,#box1 li{
            width: 500px;
            height: 50px;
            overflow: hidden;
        }
        #box3{
            width: 150px;
            height: 180px;
            overflow: hidden;
            margin-left: 250px;
            display: inline-block;
            top:-20px;
            /*border: 1px solid red;*/
        }
        li div{
            width: 250px;
            height: 50px;
            line-height: 50px;
            margin-left: 100px;
            position: relative;
            top:-50px;
        }
        ol div{
            width: 250px;
            height: 50px;
            line-height: 50px;
            margin-left: 200px;
            position: relative;
            top:-50px;
        }
        #box3 img{
            width: 150px;
            height: 180px;
            position: relative;
            top:-180px;
        }
        #title h1{
            text-align: center;
        }
        p{
          text-indent: 2em;
        }
        #box4{
            width: 1000px;
            height: 116px;
            overflow: hidden;
        }
        #box5{
            width: 1000px;
            height: 105px;
            overflow: hidden;
        }
        #box6{
            width: 1000px;
            height: 62px;
            overflow: hidden;
        }
        #box7{
            width: 1000px;
            height: 105px;
            overflow: hidden;
        }
        #box4_1,#box5_1{
            position: relative;
            top:-116px;
        }
        #box6_1{
            position: relative;
            top:-62px;
        }
        #box7_1{
            position: relative;
            top:-105px;
        }
    </style>
</head>
<body>
<div id="title"><h1>个人简历</h1></div>
<div id="box">
    <ul>
        <dl>
            <fieldset>
                <legend>基本信息</legend>
                <div id="box1">
                    <li><div>姓名：张adf</div></li>
                    <li><div>年龄：2</div></li>
                    <li><div>学历：大学本科</div></li>
                    <li><div>求职意向：JAVA全栈工程师</div></li>
                </div>
                <div id="box2">
                    <ol><div>手机：1399172451692</div></ol>
                    <ol><div>邮箱：11327935119@qq.com</div></ol>
                    <ol><div>微信：xiaomengzi</div></ol>
                    <ol><div>地址:陕西省商洛市镇安县</div></ol>
                </div>
                <div id="box3">
                    <img src="images/b1.jpg">
                </div>
            </fieldset>
            <div id="box4">
                <div id="box4_1">
                    <fieldset>
                        <legend>自我评价</legend>
                        <p>
                            工作积极认真，细心负责，熟练运用办公自动化软件，善于在工作中提出问题，发
                            现问题，解决问题，有较强的分析能力，勤奋好学，踏实肯干，动手能力强，认真
                            负责，有很强的社会责任感，坚毅不拔，吃苦耐劳，喜欢和勇于迎接新挑战！
                        </p>
                    </fieldset>
                </div>
            </div>
            <div id="box5">
                <div id="box5_1">
                    <fieldset>
                        <legend>教育背景</legend>
                        <ul>学校：宝鸡文理学院</ul>
                        <ul>专业:计算机科学与技术专业</ul>
                        <ul>主修课程：数据库原理、计算机图形学、大数据技术，JAVA实用教程</ul>
                    </fieldset>
                </div>
            </div>
            <div id="box6">
                <div id="box6_1">
                    <fieldset>
                        <legend>工作经验</legend>
                        xxxx年x月-xxxx年x月在xx公司进行实习。
                    </fieldset>
                </div>
            </div>
            <div id="box7">
                <div id="box7_1">
                    <fieldset>
                        <legend>职业技能</legend>
                        <li>
                            <ul>语言能力：大学英语四级（待过）</ul>
                            <ul>计算机：熟练操作windows平台上的各类应用软件，如Office、各种计算机编程工具。</ul>
                            <ul>团队能力：具有丰富的团队组建与扩充经验和项目管理与协调经验，能够独当一面。</ul>
                        </li>
                    </fieldset>
                </div>
            </div>
        </dl>
    </ul>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    var juben = [
        function () {
            $('#box #box1 div:eq(0)').css({
                left:0,
                top:-50
            }).animate({
                left:0,
                top:0
            })
        },
        function () {
            $('#box #box1 div:eq(1)').css({
                left:0,
                top:-50
            }).animate({
                left:0,
                top:0
            })
        },
        function () {
            $('#box #box1 div:eq(2)').css({
                left:0,
                top:-50
            }).animate({
                left:0,
                top:0
            })
        },
        function () {
            $('#box #box1 div:eq(3)').css({
                left:0,
                top:-50
            }).animate({
                left:0,
                top:0
            })
        },
        function () {
            $('#box #box2 div:eq(0)').css({
                left:0,
                top:-50
            }).animate({
                left:0,
                top:0
            })
        },
        function () {
            $('#box #box2 div:eq(1)').css({
                left:0,
                top:-50
            }).animate({
                left:0,
                top:0
            })
        },
        function () {
            $('#box #box2 div:eq(2)').css({
                left:0,
                top:-50
            }).animate({
                left:0,
                top:0
            })
        },
        function () {
            $('#box #box2 div:eq(3)').css({
                left:0,
                top:-50
            }).animate({
                left:0,
                top:0
            },zhixing)
        },
        function () {
            $('#box #box3 img:eq(0)').css({
                left:0,
                top:-180
            }).animate({
                left:0,
                top:0
            })
        },
        function () {
            $('#box #box4 #box4_1:eq(0)').css({
                left:0,
                top:-116
            }).animate({
                left:0,
                top:0
            },function () {
                setTimeout(zhixing,1000)
            })
        },
        function () {
            $('#box #box5 #box5_1:eq(0)').css({
                left:0,
                top:-116
            }).animate({
                left:0,
                top:0
            },function () {
                setTimeout(zhixing,1000)
            })
        },
        function () {
            $('#box #box6 #box6_1:eq(0)').css({
                left:0,
                top:-116
            }).animate({
                left:0,
                top:0
            },function () {
                setTimeout(zhixing,1000)
            })
        },
        function () {
            $('#box #box7 #box7_1:eq(0)').css({
                left:0,
                top:-105
            }).animate({
                left:0,
                top:0
            },function () {
                setTimeout(zhixing,1000)
            })
        }
    ];
    $(':root').queue('汪伦，你怎么看？',juben);

    $(document).click(function () {
        $(':root').dequeue('汪伦，你怎么看？');
    });
    //自执行函数
    function zhixing() {
        $(':root').dequeue('汪伦，你怎么看？');
    }
</script>
</body>
</html>

在这里插入图片描述

蒙蒙小公举
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
colorbox弹出层插件使用方法及注意事项
web前端攻城狮
11-20 3919
colorbox弹出层插件使用方法及注意事项
colorbox的常见问题
wxinpeng的专栏
08-14 495
发现colorbox官方网站的troubleshoot写的比较好，转载一下。 1,flash覆盖colorbox: This is not a ColorBox specific problem, by default Flash will overlay any HTML content. This can be prevented by setting the ‘wmode’ para...
CTF-show WEB入门--web16
最新发布
m0_73912575的博客
01-05 395
CTF-show WEB入门--web16
Java WEB 十六
weixin_44211905的博客
06-29 234
Java WEB 十六
web-16
Javajsjsh的博客
04-22 1341
javaweb（E家园项目课） ​ <!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="te
JQuery弹出窗口小插件ColorBox
10-27
**jQuery ColorBox插件详解** 在网页设计中，弹出窗口常常用于展示图片、内容或者进行用户交互，而`jQuery ColorBox`就是这样一个强大的轻量级弹出窗口小插件。它提供了优雅的视觉效果，使得用户体验更加舒适，是...
jquery colorbox 弹出窗口插件
01-11
jquery colorbox 弹出窗口 插件 支持 照片，照片组，幻灯片，ajax，内联 和 iframe 框架。 通过CSS 控制外观，使用用户可以很容易重新定制外观。 不需要更改 ColorBox 的 javascript 文件就可以重新设定其行为。 ...
jquery弹窗插件colorbox绑定动态生成元素的方法
10-25
在jQuery中，有时候我们需要对页面上动态生成的元素进行事件绑定，例如使用colorbox插件创建弹窗效果。Colorbox是一款高效且用户友好的jQuery插件，它提供了丰富的选项和功能，可以用来创建图片、iframe、inline内容...
jquery弹出框插件colorBox
01-05
**jQuery ColorBox插件详解** 在网页开发中，弹出框是常见的交互元素，用于显示额外的信息或进行用户交互。jQuery ColorBox是一款高效且可高度定制的弹出框插件，它提供了丰富的功能，使开发者能够轻松创建各种类型...
ColorBox:moziloCMS 2.0 插件
06-08
** MoziloCMS 2.0 插件：ColorBox** ColorBox是一款流行的JavaScript库，它为网站提供了一种优雅的、可自定义的轻量级弹出窗口解决方案。这款插件专为moziloCMS 2.0设计，使得内容管理系统的图片、iframe、HTML、...
colorbox官方用法(中文版)
12-12
colorbox 官方 用法 中文版 word文档
ColorBox-library,为色彩爱好者！一个简单但功能强大的android颜色选择器.zip
09-26
该标志的版权归Hafiz Ahmmed所有（https://github.com/hafiz ahmmed）
CTFSHOW web入门——web16
m0_74093152的博客
02-05 270
CTFSHOWweb入门——web16
jquery使用ColorBox弹出图片组浏览层
weixin_34252090的博客
03-14 115
本示例使用Jquery的ColorBox插件弹出图片组浏览层。效果预览网址：http://keleyi.com/keleyi/phtml/colorbox/ 以下是本效果的完整代码，将以下代码保存到html文件，打开即可预览效果。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org...
jQuery的弹出窗口插件colorbox
weixin_34288121的博客
11-17 280
官方网站：http://colorpowered.com/colorbox/   支持 照片，照片组，幻灯片，ajax，内联 和 iframe 框架。 通过CSS 控制外观，使用用户可以很容易重新定制外观。 不需要更改 ColorBox 的 javascript 文件就可以重新设定其行为。 可以依靠 callback &amp; event-hooks 进行拓展，不需要修改源代码。 非...
jquery插件（三）：Colorbox–内容播放插件
dearkerwin的专栏
10-17 1149
一、colorbox介绍 jQuery Colorbox是一款非常好的内容播放插件。 它集弹出层、幻灯片播放功能于一身，不仅于此，它还支持其它的内容格式：例如html, flash, iframe等，这些内容的显示方式都是Ajax的。 更难能可贵的是，在压缩后它只有10K的大小，使用这款插件不会给你的网页带来过多的负担，而且还能实现很棒的视觉效果，为用户体验增色不少。 而且可以更加自己
colorbox弹出层图片显示
weixin_30633405的博客
08-31 210
基本配置 <script type="text/javascript"> jQuery(function($) { var colorbox_params = { rel: 'colorbox', reposition:true, scalePhotos:true, scrolling:false, close:'×', m...
vue-colorbox
07-11
Vue-Colorbox 是一个基于 Vue.js 的颜色选择器组件，用于选择和展示颜色。 要使用 Vue-Colorbox，首先需要安装它。可以通过 npm 包管理器来安装： ``` npm install vue-colorbox ``` 然后，在您的 Vue 组件中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值