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. 让页面中的每个元素都适合在移动设备上展示

var scr = document.createElement('script');
scr.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');
document.body.appendChild(scr);
scr.onload = function(){
$('div').attr('class', '').attr('id', '').css({
'margin' : 0,
'padding' : 0,
'width': '100%',
'clear':'both'
});
};

3.图像等比例缩放

$(window).bind("load", function() { 

// IMAGE RESIZE
$('#product_cat_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
}); //$("#contentpage img").show(); // IMAGE RESIZE
});

4.返回页面顶部

// Back To Top
$(document).ready(function(){
$('.top').click(function() {
$(document).scrollTo(0,500);
});
});
//Create a link defined with the class .top
<a href="#" class="top">Back To Top</a>

5.使用jQuery打造手风琴式的折叠效果

var accordion = {
init: function(){
var $container = $('#accordion');
$container.find('li:not(:first) .details').hide();
$container.find('li:first').addClass('active');
$container.on('click','li a',function(e){
e.preventDefault();
var $this = $(this).parents('li');
if($this.hasClass('active')){
if($('.details').is(':visible')) {
$this.find('.details').slideUp();
} else {
$this.find('.details').slideDown();
}
} else {
$container.find('li.active .details').slideUp();
$container.find('li').removeClass('active');
$this.addClass('active');
$this.find('.details').slideDown();
}
});
}
};

6.通过预加载图片廊中的上一幅下一幅图片来模仿Facebook的图片展示方式

var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("").attr("src", nextimage).load(function(){
//all done
});
}, 100);
});

7.使用jQuery和Ajax自动填充选择框

$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '
' + j[i].optionDisplay + '
';
}
$("select#ctlPerson").html(options);
})
})
})

8.自动替换丢失的图片

// Safe Snippet
$("img").error(function () {
$(this).unbind("error").attr("src", "missing_image.gif");
});
// Persistent Snipper
$("img").error(function () {
$(this).attr("src", "missing_image.gif");
});

9.在鼠标悬停时显示淡入/淡出特效

$(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
});
});

10.清空表单数据

function clearForm(form) { 

// iterate over all of the inputs for the form 

// element that was passed in
$(':input', form).each(function() {
var type = this.type;
var tag = this.tagName.toLowerCase();
// normalize case // it's ok to reset the value attr of text inputs, // password inputs, and textareas
if (type == 'text' || type == 'password' || tag == 'textarea')
this.value = "";
// checkboxes and radios need to have their checked state cleared
// but should *not* have their 'value' changed
else if (type == 'checkbox' || type == 'radio')
this.checked = false;
// select elements need to have their 'selectedIndex' property set to -1
// (this works for both single and multiple select elements)
else if (tag == 'select')
this.selectedIndex = -1;
});
};

最新文章

  1. AE开发能否实现TOC Control里添加多个Data Frame
  2. c语言练习
  3. [POJ1765]November Rain
  4. idea上实现github代码同步
  5. android官方开源的高性能异步加载网络图片的Gridview例子
  6. HadoopDB:混合分布式系统
  7. hdu 2460
  8. C#--比较
  9. openui5的资料比较少
  10. 【数论】Lucas
  11. 随机ID添加
  12. Terminating app due to uncaught exception &#39;CALayerInvalid&#39;, reason: &#39;layer &lt;CALayer: 0x7fda42c66e30&gt; is a part of cycle in its layer tree&#39;
  13. Java NIO Channel通道
  14. https://www.chromestatus.com/features/5093566007214080
  15. Zephyr的Time、Timer、sleep
  16. SQL Server关于WITH CUBE、WITH ROLLUP和GROUPING使用
  17. idea 常用设置初始化
  18. Spring事务管理的demo
  19. Knockout学习,添加模板,事件,Mouseover,mouseout
  20. HashMap 源码解析(一)之使用、构造以及计算容量

热门文章

  1. bash简介1
  2. 初识asp
  3. Beta阶段冲刺前准备
  4. mysql EXPLAIN 参数表
  5. strtr、str_replace()、substr_replace、preg_replace之间的区别
  6. linux 无交互生成ssh rsa免秘证书
  7. param 是获取请求传递过来的参数
  8. MySQL-常见数据拆分办法
  9. hbase 跳转过滤器skipfilter
  10. MT【129】常数变易法