jquery实现折角插件jCorner js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery实现折角插件jCorner js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
    <head>
	<title>jqueryʵ���۽ǲ��jCorner</title>

        <link href='http://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps:700|Roboto:300,700' rel='stylesheet' type='text/css'>

        <style>
            body {
                background-color: #ccc;
                font-family: 'Roboto', Arial;
                font-size: 20px;
                text-shadow: 1px 1px #fff;
            }

            #title {
                width: 80%;
                margin: 50px auto;
                font-family: 'Oleo Script Swash Caps', Arial;
                font-size: 120px;
                text-shadow: 2px 5px rgba(100, 100, 100, 0.5);
            }
            .page {
                width: 12%;
                text-align: center;
                padding: 20px 0;
                float: left;
                margin-right: 2.5%;
                min-width: 100px;
                margin-bottom: 10px;
                position: relative;
            }
            
            .code, pre {
                font-family: monospace, Arial;
                border: 2px dotted;
                border-radius: 5px;
                font-size: 15px;
                max-width: 100%;
                overflow-x: auto;
                color: #666;
            }
            
            pre {
                padding: 10px;
            }
            
            a {
                text-decoration: none;
                border-bottom: 2px dashed;
            }
            
            .a {
                background-color: #11A7FC;
            }
            .b {
                background-color: #95D127;
            }
            .c {
                background-color: #fff000;
            }
            .d {
                background-color: #FF8638;
            }
            .e {
                background-color: #EE3551;
            }
            .f {
                background-color: #EE50CF;
            }
            .g {
                background-color: #B544EE;
                margin-right: 0;
            }
            .a_c {
                color: #11A7FC;
                font-weight: bold;
            }
            .b_c {
                color: #95D127;
                font-weight: bold;
            }
            .c_c {
                color: #fff000;
                font-weight: bold;
                text-shadow: 1px 1px #666;
            }
            .d_c {
                color: #FF8638;
                font-weight: bold;
            }
            .e_c {
                color: #EE3551;
                font-weight: bold;
            }
            .f_c {
                color: #EE50CF;
                font-weight: bold;
            }
            .g_c {
                color: #B544EE;
                font-weight: bold;
            }

            #subtitle {
                text-align: center;
                background-color: #eee;
                background: url('images/example-background.png');
                width: 500px;
                padding: 50px 0;
                max-width: 80%;
                margin: 0 auto;
                margin-bottom: 100px;
                font-family: 'Oleo Script Swash Caps', Arial;
                font-size: 40px;
                text-shadow: 1px 1px rgba(100, 100, 100, 0.5);
            }
            h1 {
                font-size: 60px;
                margin: 0;
                font-family: 'Oleo Script Swash Caps', Arial;
                text-shadow: 1px 1px #666;
            }
            h2 {
                margin: 10px 0 5px 0;
            }
            
            p {
                margin: 15px 0;
            }

            .paper {
                width: 70%;
                padding: 50px 5%;
                margin: 0 auto;
                margin-bottom: 50px;
                background-color: #eee;
                background: url('images/example-background.png');
            }
            
            a.button {
                border-radius: 10px;
                padding: 5px 20px;
                margin-right: 20px;
                margin-bottom: 10px;
                color: #666;
                text-shadow: none;
            }
        </style>

        <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="js/jCorner.js" type="text/javascript"></script>
    
        <script type="text/javascript">
            $(document).ready(function() {
                $('.page').jCorner({
                    background: '#ccc',
                    size: 25
                });
                $('#subtitle').jCorner({
                    background: '#ccc',
                    size: 40,
                    link: 'https://github.com/Ovilia/jCorner'
                });
                $('.paper').jCorner({
                    background: '#ccc',
                    size: 40
                });
            });
        </script>
        
    </head>
    <body>
        <div id="title">
            <div class="page a">j</div>
            <div class="page b">C</div>
            <div class="page c">o</div>
            <div class="page d">r</div>
            <div class="page e">n</div>
            <div class="page f">e</div>
            <div class="page g">r</div>
            <div style="clear: both"></div>
        </div>
        <div id="subtitle">A jQuery Plugin <br />to Fold Paper Corners<br />
        </div>
</body>
</html>

JS代码(jCorner.js):

(function($){
	$.fn.jCorner = function(options){
	return this.each(function(){
	var settings = $.extend({
	size:40,id:undefined,link:undefined,background:'#fff'}
,options);
	var id = settings.id === undefined ? '':' id="' + settings.id + '"';
	var a_start = settings.link === undefined ? '':'<a href="' + settings.link + '" target="_blank">';
	var a_end = settings.link === undefined ? '':'</a>';
	var element = '<div' + id + ' class="jCorner" style="width:' + settings.size * 2 + 'px;
	height:' + settings.size + 'px;
	position:absolute;
	bottom:0;
	right:0;
	">' + a_start + '<div class="jCorner_left" style="border-width:0 0 ' + settings.size + 'px ' + settings.size + 'px;
	width:0px;
	height:0px;
	border-style:solid;
	' + 'border-color:transparent transparent #999 transparent;
	' + 'opacity:0.6;
	float:left;
	z-index:10;
	"></div>' + '<div class="jCorner_square" style="border-width:0 0 ' + settings.size + 'px ' + settings.size + 'px;
	border-color:transparent transparent ' + settings.background + ' transparent;
	width:0px;
	height:0px;
	' + 'border-style:solid;
	float:left;
	"></div>' + '<div class="jCorner_right" ' + 'style="border-width:' + settings.size + 'px ' + settings.size + 'px 0 0;
	left:' + settings.size + 'px;
	top:-' + settings.size + 'px;
	width:0px;
	' + 'height:0px;
	border-style:solid;
	' + 'border-color:#fff transparent transparent transparent;
	' + 'position:relative;
	opacity:0.6;
	float:left;
	' + 'z-index:10;
	"></div>' + a_end;
	return $(this).append(element).css('position','relative');
}
);
}
}
(jQuery));

附件:下载该文件资源,减少时间成本(增值服务)