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 相关文章推荐
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
js实现打字小游戏
Dec 17 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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一些公用函数的集合
2008/03/27 PHP
php 启动报错如何解决
2014/01/17 PHP
php常用hash加密函数
2014/11/22 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
python创建文本文件的简单方法
2020/08/30 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
打印机墨盒:123Inkjets
2017/02/16 全球购物
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
企业诚信承诺书
2014/05/23 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
《鲸》教学反思
2016/02/23 职场文书
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python