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脚本学习 比较实用的基础
Sep 07 Javascript
Prototype Selector对象学习
Jul 23 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
在angular 6中使用 less 的实例代码
May 13 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
hessian 在PHP中的使用介绍
2010/12/13 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
javascript 写类方式之四
2009/07/05 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
详解React的回调渲染模式
2020/09/10 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
python线程、进程和协程详解
2016/07/19 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
总经理职责范文
2013/11/08 职场文书
校庆筹备方案
2014/03/30 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
小学生环保演讲稿
2014/04/25 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
培训计划通知
2015/07/15 职场文书
Oracle使用别名的好处
2022/04/19 Oracle