首頁 > web前端 > js教程 > js jquery實作圖片裁切功能_jquery

js jquery實作圖片裁切功能_jquery

WBOY
發布: 2016-05-16 16:22:37
原創
1282 人瀏覽過

現在我們在使用各大網站的個人中心時,都有個上傳個人頭像的功能。用戶在上傳了個人照片之後,可能不符合網站的要求,於是要求用戶對照片進行裁剪,最終根據用戶裁剪的尺寸生成頭像。這個功能真是太棒了,原來不懂js的時候,感覺很神奇,太神奇了。心想哪天要是自己也能搞清楚這裡面的技術,那該多牛呀~大家是不是也有何我一樣的想法呀~哈哈~~

下面我們就來用javascript來實作這個功能吧。

複製程式碼 程式碼如下:


http://www.w3.org/1999/xhtml">


clip




 
使用方法

    

$("#container").clip({
  imgC : $("#imgC"),
        blockClass : "block",
        tipsClass  : "tips"       
 });


   

imgC : 表示裁剪图片的容器,也就是右边的图


   

blockClass : block的样式名  也就是页面上的可以拖动的滑块的样式 因为怕和别的页面上的样式重名  默认是block


   

tipsClass  : tips的样式名   也就是页面上显示left width height top的那个span的样式名 默认是tips




     

  •      

       

  •    

  •      

       


熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板