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 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python搭建FTP服务器的方法示例
2018/01/19 Python
keras得到每层的系数方式
2020/06/15 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
无故旷工检讨书
2014/01/26 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
优质服务口号
2014/06/11 职场文书
欢迎标语大全
2014/06/21 职场文书
商铺门面租房协议书
2014/10/21 职场文书
庆元旦主持词
2015/07/06 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
浅析MongoDB之安全认证
2021/06/26 MongoDB
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js