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 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
JavaScript中对象介绍
Dec 31 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 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中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
smarty简单应用实例
2015/11/03 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
js控制表单操作的常用代码小结
2013/08/15 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
vuex的使用步骤
2021/01/06 Vue.js
python显示天气预报
2014/03/02 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
为什么说python适合写爬虫
2020/06/11 Python
Keras实现DenseNet结构操作
2020/07/06 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
新三好学生主要事迹
2014/01/23 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书