2则自己编写的jQuery特效分享


Posted in Javascript onFebruary 26, 2015

先贴代码吧

<script type="text/javascript">

    var msg=["你真伟大","你真漂亮","该吃饭了"];

    $(document).ready(function(){

          $("#tijiao").click(function(){

          $("#p1").html(msg[Math.floor(Math.random() * msg.length)]);

          });

    });

</script>

 这个代码呢是一个 JQ 的按钮点击随机出现一句话的这么一个功能

要点  就在

 $("#p1").html(msg[Math.floor(Math.random() * msg.length)]);

这一句上面。

好了,下一段代码

    <script language="javascript" type="text/javascript">

            $(

               function() {

               $(".content1 ul:gt(0)").hide();

               $(".tab li:first").addClass("active");

               $(".tab li").css("cursor", "pointer");

               $(".tab li").hover(

                     function(){

                       $(this).addClass("active").siblings().removeClass("active");

                       $(".content1 li").eq($(this).index()).siblings().hide().end().show();

                                }

                                 )

                           }

             );

    </script>   

这个是一个tab切换的效果

关键点在于

tab选项卡的div块内:float浮动一行显示多个<li>。
下面对应的contentdiv块内:多个div,

第一个display:block。其余none。
上下div块内元素的数目和顺序保证一致。

后面就对<li>绑定click.

对应相对的思路就好了!

好了,今天分享的这2则jQuery特效就先到这里了,以后慢慢分享一些其他特效,希望大家能够喜欢。

Javascript 相关文章推荐
使用JavaScript switch case 另类写法
Mar 14 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
详解vue项目构建与实战
Jun 27 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 #Javascript
js实现格式化金额,字符,时间的方法
Feb 26 #Javascript
如何减少浏览器的reflow和repaint
Feb 26 #Javascript
详谈javascript中DOM的基本属性
Feb 26 #Javascript
jqueryUI里拖拽排序示例分析
Feb 26 #Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 #Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 #Javascript
You might like
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
php mail to 配置详解
2014/01/16 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
python中threading开启关闭线程操作
2020/05/02 Python
python如何爬取网页中的文字
2020/07/28 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
毕业生个人求职信范例分享
2013/12/17 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
道歉短信大全
2015/05/12 职场文书
现货白银电话营销话术
2015/05/29 职场文书
大学生读书笔记大全
2015/07/01 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python