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 相关文章推荐
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
js密码强度实时检测代码
Mar 02 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
js验证密码强度解析
Mar 18 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Python super()方法原理详解
2020/03/31 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
出纳岗位职责模板
2013/11/27 职场文书
应用艺术毕业生的自我评价
2013/12/04 职场文书
小松树教学反思
2014/02/11 职场文书
工作散漫检讨书
2014/09/16 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS