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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
Vue常用指令详解分析
Aug 19 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php生成图片验证码
2015/06/09 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
Vue实现简单分页器
2018/12/29 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
Python单例模式实例分析
2015/01/14 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
python简单贪吃蛇开发
2019/01/28 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
Python如何将装饰器定义为类
2020/07/30 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
经销商会议欢迎词
2014/01/11 职场文书
工作求职信
2014/07/04 职场文书
法定授权委托证明书
2014/09/27 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
消防验收申请报告
2015/05/15 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫