<!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>
图片的倾斜,点击按钮和鼠标移动到图片上
最新推荐文章于 2024-06-13 20:27:34 发布