实现方法:1、用“元素对象.click(function(){})”语句给指定元素绑定点击事件,并设置事件处理函数;2、在处理函数中,设置“元素对象.css("transform","rotateY(180deg)")”语句来实现翻转效果。
本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。
jquery实现点击翻转效果的方法
1、设置点击事件
利用click()给元素绑定点击事件,并设置事件处理函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .block { width: 200px; height: 200px; background: brown; cursor: pointer; transition: 0.8s; } </style> <script src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { //点击事件发生后,执行的代码 }); }); </script> </head> <body> <div class="block"></div><br> <button>翻转元素</button> </body> </html>
2、在事件处理函数中,使用css()给指定元素添加翻转样式
css() 方法返回或设置匹配的元素的一个或多个样式属性。
翻转样式为“transform: rotateY(180deg)
”
$(document).ready(function() { $("button").click(function() { $("div").css("transform","rotateY(180deg)"); }); });
【推荐学习:jQuery视频教程、web前端视频】
以上是jquery怎么实现点击翻转效果的详细内容。更多信息请关注PHP中文网其他相关文章!