Heim >php教程 >php手册 >Jquery图片裁剪插件

Jquery图片裁剪插件

WBOY
WBOYOriginal
2016-06-07 11:43:051533Durchsuche

来自互联网,整理分享有
Jquery图片裁剪插件nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br> <br>   <br>     <meta> <br>     <link> <br>     <style> <br /> body{font-family: Arial,sans-serif;}<br /> .demo{background: #eee;border: solid 2px #ddd;border-radius: 4px;padding: 0.6em;height:380px; width:750px;}<br /> div.frame{background: #fff;padding: 0.8em;border: solid 2px #ddd;}<br /> .demo table td{padding-left: 1em;}<br /> .demo table td input{width: 4em;text-align: right}<br /> .coolbg{-moz-border-bottom-colors:none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;background: url("allbtbg2.gif") repeat scroll 0 0 #EFF7D0;border-color: -moz-use-text-color #ACACAC #ACACAC -moz-use-text-color;border-image: none;border-style: none solid solid none;border-width: medium 1px 1px medium;cursor: pointer;padding:2px 5px;font-size:12px} <br /> </style> <br>   <br>   <br> <script></script><br> <script></script><br> <script><br /> function preview(img, selection) {<br /> if (!selection.width || !selection.height)<br /> return;<br /> <br /> var scaleX = 100 / selection.width;<br /> var scaleY = 100 / selection.height;<br /> <br /> $(&#039;#preview img&#039;).css({<br /> width: Math.round(scaleX * 300),<br /> height: Math.round(scaleY * 300),<br /> marginLeft: -Math.round(scaleX * selection.x1),<br /> marginTop: -Math.round(scaleY * selection.y1)<br /> });<br /> <br /> $(&#039;#x1&#039;).val(selection.x1);<br /> $(&#039;#y1&#039;).val(selection.y1);<br /> $(&#039;#x2&#039;).val(selection.x2);<br /> $(&#039;#y2&#039;).val(selection.y2);<br /> $(&#039;#w&#039;).val(selection.width);<br /> $(&#039;#h&#039;).val(selection.height); <br /> }<br /> <br /> $(function () {<br /> $(&#039;#photo&#039;).imgAreaSelect({ aspectRatio: &#039;1:1&#039;, handles: true,<br /> fadeSpeed: 200, onSelectChange: preview });<br /> });<br /> </script><br> <div> <br>   <div> <br>     <p><br>      <b>大图</b>   选取:左击不放拖曳光标     取消:选取区外左击光标<br>     </p> <br>  <br>     <div> <br>       <img alt="Jquery图片裁剪插件" ><br>     </div> <br>   </div> <br>  <br>   <div> <br>     <p><br>       预览:<br>     </p> <br>   <br>     <div> <br>       <div> <br>         <img alt="Jquery图片裁剪插件" ><br>       </div> <br>     </div> <br> <br>     <table> <br>       <thead> <br>         <tr> <br>           <th> <br>               坐标:<br>           </th> <br>           <th> <br>             宽高:<br>           </th> <br>         </tr> <br>       </thead> <br>       <tbody> <br>         <tr> <br>           <td><b>X<sub>1</sub>:</b></td> <br>                <td><input></td> <br>                <td><b>宽:</b></td> <br>                <td><input></td> <br>         </tr> <br>         <tr> <br>           <td><b>Y<sub>1</sub>:</b></td> <br>           <td><input></td> <br>           <td><b>高:</b></td> <br>           <td><input></td> <br>         </tr> <br>         <tr> <br>           <td><b>X<sub>2</sub>:</b></td> <br>           <td><input></td> <br>           <td><input></td> <br>         </tr> <br>         <tr> <br>           <td><b>Y<sub>2</sub>:</b></td> <br>           <td><input></td> <br>           <td><input></td> <br>         </tr> <br>       </tbody> <br>     </table> <br>   </div> <br> </div> <br> <br>

附件 imgareaselect.rar ( 96.25 KB 下载:234 次 )

AD:真正免费,域名+虚机+企业邮箱=0元

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Oracle自增字段实现之ThinkPHPNächster Artikel:动态加载 js css的类