推荐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 相关文章推荐
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
js实现简单掷骰子小游戏
Oct 24 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批量上传的实现代码
2013/06/09 PHP
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
EasyUI创建对话框的两种方式
2016/08/23 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
Python简单进程锁代码实例
2015/04/27 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python实现基于POS算法的区块链
2018/08/07 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python装饰器用法实例分析
2019/01/14 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
智能钱包:Ekster
2019/11/21 全球购物
超市端午节活动方案
2014/01/23 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
赔偿协议书范本
2014/09/12 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android