jQuery图片放大和旋转效果
分类:实例代码
分享一段代码实例,它实现了图片旋转和放大的效果。
拖动底部滑动条可以调整拓片的大小,鼠标旋转图片可以实现图片旋转效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> *{ margin:0px; padding:0px; -webkit-user-select:none; } .editeImgMain{ position:absolute; width:400px; height:300px; top:50%; left:50%; margin:-150px 0px 0px -200px; box-shadow:rgba(0,0,0,0.2) 0px 0px 0px 1px; display:table; } .editeImgMain .operationBar{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; z-index:100; } .editeImgMain .operationBar .rotateBar{ position:absolute; width:100px; height:100px; top:50%; left:50%; margin:-50px; pointer-events: none; } .editeImgMain .operationBar .rotateBar span{ position:absolute; font-size:12px; color:#fff; } .editeImgMain .operationBar .rotateBar .tip0{ top:0px; left:50%; margin:0px -5px } .editeImgMain .operationBar .rotateBar .tip90{ top:50%; right:0px; margin:-5px -10px; } .editeImgMain .operationBar .rotateBar .tip180{ bottom:0px; left:50%; margin:0px -10px; } .editeImgMain .operationBar .rotateBar .tip270{ top:50%; left:0px; margin:-5px 0px; } .editeImgMain .operationBar .rotateBar .rotateHandle{ box-shadow:rgba(255,255,255,1.0) 0px 0px 0px 4px; width:100px; height:100px; border-radius:50%; background-image:url('demo/jQuery/img/rotate.gif'); background-size:50px; background-position:center; background-repeat:no-repeat; } .editeImgMain .scaleBar{ position:absolute; bottom:0px; width:200px; left:50%; margin:-20px -100px; z-index:100; } .editeImgMain .scaleBar .scaleInput{ width:100%; } .editeImgMain .innerImg{ display:table-cell; vertical-align:middle; } .editeImgMain .innerImg img{ max-width:100%; max-height:100%; } </style> <script src="/wp-content/uploads/front-end-tutorial/error.html" /> </div> </div> </body> </html>
jQuery图片放大和旋转效果,这样的场景在实际项目中还是用的比较多的,关于jQuery图片放大和旋转效果就介绍到这了。
jQuery图片放大和旋转效果属于前端实例代码,有关更多实例代码大家可以查看。