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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 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_merge下进行数组合并的代码
2008/07/22 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
JavaScript国旗变换效果代码
2008/08/13 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
js中日期的加减法
2015/05/06 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
jquery实现搜索框功能实例详解
2018/07/23 jQuery
React实现评论的添加和删除
2020/10/20 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
python八大排序算法速度实例对比
2017/12/06 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
django 环境变量配置过程详解
2019/08/06 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
python 实现屏幕录制示例
2019/12/23 Python
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
幼儿园教师工作制度
2014/01/22 职场文书
促销活动总结怎么写
2014/06/25 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
收款委托书
2014/10/14 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers