jquery实现图片放大:
1,采用jquery插件,jquery.lightbox-0.5.js/jquery.lightbox-0.5.css
$(function() {
$(‘#gallery a’).lightBox();
});
2.新建一个div层,将放大或缩小的图片放入,将原图片隐藏,这个可以用toggle()实现
3.采用noConflict实现,这里使用的是jquery
jQuery.noConflict();
jQuery(document).ready(function(){
$(“img.zxx_zoom_image”).jqueryzoom();
});
为jquery.js何jqueryzoom.js
4.单独的jquery.js如何实现:
$(document).ready(function() {
var move = -15
zoom = 1.1;
$('.item').hover(function() {
width = $('.item').width() * zoom;
height = $('.item').height() * zoom;
$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:300});
$(this).find('div.caption').stop(false,true).fadeIn(300);
},
function() {
$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:300});
$(this).find('div.caption').stop(false,true).fadeOut(400);
});
});
5.关于图片的放大,jquery简单缩放,这里主要针对已知尺寸
$(function(){
var w = $("#demo1").width();//容器宽度
$("#demo1 img").each(function(){//如果有很多图片,我们可以使用each()遍历
var img_w = $(this).width();//图片宽度
var img_h = $(this).height();//图片高度
if(img_w>w){//如果图片宽度超出容器宽度--要撑破了
var height = (w*img_h)/img_w; //高度等比缩放
$(this).css({"width":w,"height":height});//设置缩放后的宽度和高度
}
});
});
关于未知尺寸
$(function(){
$("#demo2").autoIMG();
});
这里需要引用的jquery插件为jQuery.autoIMG.js文件
6.关于图片的放大实例jquery.min.js这是jquery的缩小版本,应该需要加入jquery.jqzoom.js
$(document).ready(function(){
$(".jqzoom").jqueryzoom({
xzoom: 400, //设置放大 DIV 长度(默认为 200)
yzoom: 400, //设置放大 DIV 高度(默认为 200)
offset: 10, //设置放大 DIV 偏移(默认为 10)
position: "right", //设置放大 DIV 的位置(默认为右边)
preload:1,
lens:true
});
});
7.图片放大和缩小的集合区域:
http://www.iteye.com/news/23754
这里有各种各样的关于图片放大的插件。如果说前面讲的是原理,这里就是封装好的实际应用
8.jquery自动缩放模式
jquery.fn.imageautosize = function(width,height)
{
$(”img”,this).each(function()
{
var image = $(this);
if(image.width()>width)
{
image.width(width);
image.height(width/image.width()*image.height());
}
if(image.height()>height)
{
image.height(height);
image.width(height/image.height()*image.width());
}
});
9.将文字向上滚动:
function autoScroll(obj, ul_bz){//obj为框架div
$(obj).find(ul_bz).animate({
marginTop : "-25px"
},500,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
});
}
setInterval('autoScroll("#oDiv", "#oUl")',3000)
相关的HTML代码为:
<div id="oDiv">
<ul id="oUl">
<li>第1个li元素</li>
<li>第2个li元素</li>
<li>第3个li元素</li>
<li>第4个li元素</li>
<li>第5个li元素</li>
<li>第6个li元素</li>
<li>第7个li元素</li>
<li>第8个li元素</li>
</ul>
</div>
更多详细内容请查看:http://www.111cn.net/wy/jquery/49750.htm
10.关于validate验证:
$().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
firstname: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字 符")
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致"
}
} });});
------------------------------------------------------------
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
---------------------------------------------------------------
以上为jquery校验范例
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
});
11.关于easyui的使用
http://api.btboys.com/easyui/#