您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery效果 > 正文

jQuery+CSS3打造超酷3D按钮效果

2015-09-18 10:09:38 作者:天外飞仙 人气:377 Views

jQuery+CSS3打造超酷3D按钮效果
20150913113731
jquery代码

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script> $(document).ready(function() { // Demo #1 // Find the link with an ID of 'tutorial-toggle' and listen for when it is clicked $("a#tutorial-toggle").click(function() { // When it get's clicked, toggle the class 'on' $(this).toggleClass("on"); // If the class 'on' was added... if ($('a#tutorial-toggle').hasClass('on')) { // Then fade in all the dots $(this).text('on'); $('a.dot').fadeIn(); } // Otherwise, the class 'on' must have been removed, so... else { // Fade the dots out $(this).text('off'); $('a.dot').fadeOut(); } return false; }); // Demo #2 $("a#long-toggle").click(function() { $(this).toggleClass("on"); if ($('a#long-toggle').hasClass('on')) { $(this).text('Click to turn tutorial mode off'); $('a.dot2').fadeIn(); } else { $(this).text('Click to turn tutorial mode on'); $('a.dot2').fadeOut(); } return false; }); });</script>

下载地址
预览地址

链接:http://www.jqueryba.com/5709.html(转载时请注明本文出处及文章链接)
分类:jQuery效果

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!