js圖片放大
阿新 • • 發佈：2019-02-11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>商品詳情</title> <script src="js/jquery-3.3.1.js"></script> <script> $(function(){ var $can = $("canvas");//jquery物件是一個數組物件 var ctx = $can[0].getContext("2d"); //選取id為photo的元素的i子元素img var $img = $("#photo>img"); $img.mousemove(function(event){ $can.show();//顯示隱藏的畫布 ctx.clearRect(0,0,1000,1000); //ctx.drawImage(img,picCutX,picCutY,picSizeX,picSizeY,showPicX,showPicY,showSizeX,showSizeY); //picCutX,picCutY表示所擷取部分左上角在原圖片上的座標 //picSizeX,picSizeY表示所擷取部分在原圖上的大小 //showPicX,showPicY表示擷取部分左上角在canvas上顯示的座標 //showSizeX,showSizeY表示擷取部分在canvas上顯示的大小 ctx.drawImage($img[0],event.offsetX,event.offsetY,200,200,0,0,400,400); }); $img.mouseout(function(){ $can.hide();//隱藏畫布 }); }); </script> <style> body{width:1200px; margin:auto;} *{ margin:0; padding:0;} #title{ background-color:#999; height:40px; } #product{ border:1px solid #999; overflow:hidden; } #photo{ border:1px solid #999; width:400px; height:400px; float:left; } #photo img{ width:100%; height:100%; } #info{ border:1px solid #999; width:794px; height:400px; float:left; } #info table{ width:100%; height:100%; } #adv{ border:2px solid #999; } canvas{ position:fixed !important; left:480px; top:44px; z-index:1; width:400px; height:400px; background:#CCC; display:none; } </style> <script> /*確認加入購物車*/ /*確認提交訂單*/ </script> </head> <body> <div id="header"></div> <div id="content"> <div id="title"><h2>商店名稱</h2></div> <div id="product"> <div id="photo"><img src="img/list3_big.png"/></div> <canvas></canvas> <div id="info"> <table border="1px" cellspacing="0" cellpadding="0"> <tr> <td>商品名稱</td> <td>華碩筆記本</td> </tr> <tr> <td>商品簡介</td> <td>酷睿i7八代/獨顯4G/8G記憶體</td> </tr> <tr> <td>商品價格</td> <td>￥6000</td> </tr> <tr> <td>商品庫存</td> <td>10</td> </tr> <tr> <td>商品銷量</td> <td>10</td> </tr> <tr> <td>購買數量</td> <td>-1+</td> </tr> <tr> <td>總價格</td> <td>￥6000</td> </tr> <tr> <td><a href="">加入購物車</a></td> <td><a href="">直接下訂單</a></td> </tr> </table> </div> </div> <div id="adv">本店推薦同類商品</div> </div> <div id="footer"></div> </body> </html>