淡入效果
不在可视范围内的图片不会加载。滚动时按需加载。图片出现时使用的是jquery的淡入效果。请清空缓存重新测试一下。
可以如下demo页面作比较:没有淡入效果的。
不在可视范围内的图片不会加载。滚动时按需加载。图片出现时使用的是jquery的淡入效果。请清空缓存重新测试一下。
可以如下demo页面作比较:没有淡入效果的。
很多网站上有留言功能,都需要对留言时间进行处理,处理成“刚刚、5分钟前、1个小时前,几天前,几个月前”这种的时间格式,通过JS方法就可以实现了,方法如下:
/**
* 返回将日期转换为时间描述
*
* @param date
* @return
*/
function getDateDiff(dateTimeStamp) {
var now = new Date().getTime();
$(".pick").live("click", function(){
//JS、JQuery需要实现代码
});
使用live这种方式是JQuery1.9.1以前的的版本,JQuery1.9.1以后的需要使用bind才可以,开始在使用过程中又发现,在用JS或JQuery加载出来的HTML
$('.pick').bind('click',function(event){
jQuery1.9.1针对checkbox的调整:
在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作如下:
判断是否选中
jQuery实现元素的上下移动示例代码
<html>
<head>
<title>
</title>
<style type="text/css">
table { background:#949494; width:400px; line-height:20px;} td { border-right:1px
solid gray; border-bottom:1px solid gray; }
</style>
<script src="jquery.js" type="text/javascript">
</script>
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载。
对于一些设置北京图片时,常常会不能自动适应屏幕大小,搜索后找到一个方法:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Jquery和CSS使背景图片自动适应大小
</title>
<style type="text/css">
.slideContent { width:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/da.jpg',
sizingMethod='scale'); -moz-background-size:100% 100%; background-size:100%
100%; }
</style>
<script type="text/javascript" src="js/jquery-1.4.4.min.js">
</script>
<script type="text/javascript">
$(function() {
cover();
$(window).resize(function() {
cover();
});
});
function cover() {
var h = $(window).height();
var w = $(window).width();
$(".slideContent").height(h);
$(".slideContent").width(w);
}
</script>
<body>
<div class="slideContent">
</div>
</body>
</html>
需要做一个地图分布式的显示效果,需要js文件js/FusionCharts.js和flash文件FusionCharts/FCMap_China2.swf:
前不久公司有个项目是在触摸屏上做产品展示,大家都觉得Iphone或者Android上的滑屏效果不错,模仿着我今天也参考的做了一个DEMO的,主要的是下载js/jquery.ui.touch.js文件
参考效果:
前言:这是本类别博文JQuery即用即查开篇。
因为查手册太麻烦,而且有时候需要深入命令所在详细页面才能了解此命令的具体作用是什么。
写这几篇文章就是为了,工作遇到问题时,一看这几篇文章就可以查到哪个命令的作用正好符合,然后自己再深入手册进行具体学习用法。
写的都是常用的一些,前提是你对jquery命令有一定了解,且有jquery手册。
第一篇:JQuery元素获取常见用法
今天看了head first ajax这本书里ajax的实例,讲的很好,这本书觉着很不错,推荐下。
Ajax (Asynchronous Javascript and XML)即异步Javascript和XML,但不定非要使用js和xml才能称为Ajax,简单说,Ajax是设计和构建web页面的一种方法,使之像桌面应用一样具有响应性和交互性,而其中的异步就是指浏览器像服务器发出请求而无需用户等待响应。
1 , 创建元素节点
传统的 javascript 方法,创建元素节点
var a =document.createElement("p");
jQuery 中创建节点的方法是:
jQuery常用方法名:
1.addClass()removeClass()添加与删除指定的类名
2.append(content)添加内容到对象
3.appendTo(stringexpr)添加到被加对象中去
4.attr(stringname)取得第一个匹配元素的属性值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>如何用javascript JQuery 判断图片是否存在</title>
jQuery KinSlideshow自定义图片却换效果插件
$(function() {
$("#KinSlideshow").KinSlideshow({
moveStyle: "right",
titleBar: {
titleBar_height: 30,
titleBar_bgColor: "#08355c",
titleBar_alpha: 0.5
},
titleFont: {
TitleFont_size: 12,
TitleFont_color: "#FFFFFF",
TitleFont_weight: "normal"
},
btn: {
btn_bgColor: "#FFFFFF",
btn_bgHoverColor: "#1072aa",
btn_fontColor: "#000000",
btn_fontHoverColor: "#FFFFFF",
btn_borderColor: "#cccccc",
btn_borderHoverColor: "#1188c0",
btn_borderWidth: 1
}
});
});
jQuery FancyBox图片弹出浏览效果插件
$(function() {
$("a[rel=example_group]").fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'titlePosition': 'over',
'maxWidth': 700,
'titleFormat': function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">图片文件:' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title: '') + '</span>';
}
});
});
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合使用 jQuery 1.9 和 2.0, 官方的解决方案是:
一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘。
jQuery 常见操作实现方式