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中的escape及unescape函数的php实现代码
Sep 04 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
javascript求日期差的方法
Mar 02 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
JS验证不重复验证码
Feb 10 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 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中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
vuejs指令详解
2017/02/07 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
python处理“
2019/06/10 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
Collection和Collections的区别
2016/05/02 面试题
介绍一下木马病毒的种类
2015/07/26 面试题
计算机专业学生求职信分享
2013/12/15 职场文书
小学社团活动总结
2014/06/27 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python