推荐10 个很棒的 jQuery 特效代码


Posted in Javascript onOctober 04, 2015

1.图片预加载    

(function($) {
 var cache = [];
 // Arguments are image paths relative to the current page.
 $.preLoadImages = function() {
  var args_len = arguments.length;
  for (var i = args_len; i--;) {
   var cacheImage = document.createElement('img');
   cacheImage.src = arguments[i];
   cache.push(cacheImage);
  }
 }
 
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

2. 在新窗口打开链接 (target=”blank”)    

$('a[@rel$='external']').click(function(){
   this.target = "_blank";
});
 
/*
  Usage:
  <a href="http://www.catswhocode.com" rel="external">catswhocode.com</a>
*/

3.当支持 JavaScript 时为 body 增加 class    

/* 该代码只有1行,但是最简单的用来检测浏览器是否支持 JavaScript 的方法,如果支持 JavaScript 就在 body 元素增加一个 hasJS 的 class */

$('body').addClass('hasJS');

4.平滑滚动页面到某个锚点    

$(document).ready(function() {
  $("a.topLink").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 500,
      easing: "swing"
    });
    return false;
  });
});

5. 鼠标滑动时的渐入和渐出    

$(document).ready(function(){
  $(".thumbs img").fadeTo("slow", 0.6); 
// This sets the opacity of the thumbs to fade down to 60% when the page loads
 
  $(".thumbs img").hover(function(){
    $(this).fadeTo("slow", 1.0); 
// This should set the opacity to 100% on hover
  },function(){
    $(this).fadeTo("slow", 0.6); 
// This should set the opacity back to 60% on mouseout
  });
});

6. 制作等高的列    

var max_height = 0;
$("div.col").each(function(){
  if ($(this).height() > max_height) { max_height = $(this).height(); }
});
$("div.col").height(max_height);

7. 在一些老的浏览器上启用 HTML5 的支持    

(function(){
  if(!/*@cc_on!@*/0)
    return;
  var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}
})()

//然后在head中引入该js
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
8.测试浏览器是否支持某些 CSS3 属性    

var supports = (function() {
  var div = document.createElement('div'),
   vendors = 'Khtml Ms O Moz Webkit'.split(' '),
   len = vendors.length;
 
  return function(prop) {
   if ( prop in div.style ) return true;
 
   prop = prop.replace(/^[a-z]/, function(val) {
     return val.toUpperCase();
   });
 
   while(len--) {
     if ( vendors[len] + prop in div.style ) {
      // browser supports box-shadow. Do what you need.
      // Or use a bang (!) to test if the browser doesn't.
      return true;
     }
   }
   return false;
  };
})();
 
if ( supports('textShadow') ) {
  document.documentElement.className += ' textShadow';

9. 获取 URL 中传递的参数    

$.urlParam = function(name){
  var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
  if (!results) { return 0; }
  return results[1] || 0;
}

10. 禁用表单的回车键提交    

$("#form").keypress(function(e) {
 if (e.which == 13) {
  return false;
 }
});
Javascript 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
javascript对象3个属性特征
Nov 17 Javascript
javascript日期格式化方法汇总
Oct 04 #Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 #Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 #Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 #Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 #Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 #Javascript
jQuery+PHP星级评分实现方法
Oct 02 #Javascript
You might like
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
深入密码加salt原理的分析
2013/06/06 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
关于热爱祖国的演讲稿
2014/05/04 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书