软件开发培训班 >> 编程开发 >> JavaScript

JQuery Jcrop 实现图片裁剪的插件

<html> 
    <head> 
        <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> 
        <script src="http://img.jb51.net/jslib/jquery/jquery.jcrop.min.js"></script> 
<style type="text/css"> 
        body{ 
            margin:100px auto; 
            text-align:center; 
        } 
        .jcrop-holder { 
            text-align: left; 
        } 
        .jcrop-vline, .jcrop-hline{ 
            font-size: 0; 
            position: absolute; 
            background: white url(http://img.jb51.net/jslib/images/Jcrop.gif) top left repeat; 
        } 
        .jcrop-vline { 
            height: 100%; 
            width: 1px !important; 
        } 
        .jcrop-hline { 
            width: 100%; 
            height: 1px !important; 
        } 
        .jcrop-handle { 
            font-size: 1px; 
            width: 7px !important; 
            height: 7px !important; 
            border: 1px #eee solid; 
            background-color: #333; 
            *width: 9px; 
            *height: 9px; 
        } 
         
        .jcrop-tracker { 
            width: 100%; 
            height: 100%; 
        } 
         
        .custom .jcrop-vline,.custom .jcrop-hline{ 
            background: yellow; 
        } 
        .custom .jcrop-handle{ 
            border-color: black; 
            background-color: #C7BB00; 
            -moz-border-radius: 3px; 
            -webkit-border-radius: 3px; 
        } 
        </style> 
        <script language="Javascript"> 
        jQuery(function(){ 
            jQuery(#cropbox).Jcrop(); 
        }); 
        </script> 
    </head> 
    <body> 
            <img src="http://img.jb51.net/jslib/images/flowers.jpg" id="cropbox" />
 
脚本之家 
    </body> 
</html>

技术文章快速查找

UI Events 用户界面事件

JS 文件本身编码转换图文教程

js中的时间转换—毫秒转换成日期时间的示例代码

JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)

零基础学JavaScript最新动画教程+iso光盘下载

JavaScript中的apply()方法和call()方法使用介绍

关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题

输入框的字数时时统计—关于 onpropertychange 和 oninput 使用

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建