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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
JavaScript设置FieldSet展开与收缩
May 15 Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
详解JS模块导入导出
Dec 20 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
vue3.0 上手体验
Sep 21 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实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
php实现的xml操作类
2016/01/15 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
应届生体育教师自荐信
2013/10/03 职场文书
教师年度个人总结
2015/02/11 职场文书
医院见习总结
2015/06/24 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android