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 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
详解js闭包
Sep 02 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
微信小程序实现多张图片上传功能
Nov 18 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如何编写易读的代码
2007/07/10 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python的Urllib库的基本使用教程
2015/04/30 Python
浅谈MySQL中的触发器
2015/05/05 Python
python中异常报错处理方法汇总
2016/11/20 Python
Python subprocess库的使用详解
2018/10/26 Python
Python: 传递列表副本方式
2019/12/19 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
教师的实习鉴定
2013/12/15 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
机修工工作职责
2014/02/21 职场文书
文明寝室申报材料
2014/05/12 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
个人年底工作总结
2015/03/10 职场文书
企业员工辞职信范文
2015/05/12 职场文书
毕业证明模板
2015/06/19 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python