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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
利用 JavaScript 构建命令行应用
Nov 17 Javascript
TS 类型收窄教程示例详解
Sep 23 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
详解vue axios中文文档
2017/09/12 Javascript
js实现登录与注册界面
2017/11/01 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
Java模拟试题
2014/11/10 面试题
五一口号
2014/06/19 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL