<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery.1.12.4.js"></script> <style> .qinxie { transform: skew(50deg) } </style> <script type="text/javascript"> $(document).ready(function () { /* * 點擊按鈕時執行圖片傾斜效果 * */ $("#a").click(function () { $("img").removeClass("qinxie"); }); $("#b").click(function () { $("img").addClass("qinxie"); }); /* * 鼠標滑過圖片時執行圖片傾斜效果 * */ $("img").hover(function () { $("#c").addClass("qinxie"); }, function () { $("#c").removeClass("qinxie"); }); }); </script> </head> <body> <button id="a">點擊我，移除Class</button> <br/> <button id="b">點擊我，添加Class</button> <br/> <br/> <img id="c" src="tu.png"/> </body> </html>
