jquery的一揽子缩放图片的方法以及需要的集体文件---感谢前辈们的精彩奉献
来源:互联网 发布:必应 mac 编辑:程序博客网 时间:2024/05/21 17:30
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/#
- jquery的一揽子缩放图片的方法以及需要的集体文件---感谢前辈们的精彩奉献
- 图片缩放的方法
- 前辈高人的精彩PuTTY 中文教程
- Jquery图片的缩放功能
- Shell文件集体重命名的方法
- 策划的一揽子
- 图片缩放。。以及将文件(file)转化成byte[]的方法
- 感谢pinglan的方法
- Android Bitmap转换以及图片的缩放
- Android 图片的缩放以及滑动
- 图片缩放以及相册的实现
- jQuery实现图片展开缩放的效果
- 需要跟前辈学习的博客
- 记录一些需要膜拜的前辈blog
- ant遇到的一揽子问题
- Mysql的一揽子方案用法
- 前辈们的工作经验。
- 前辈们的总结
- C++基础--内联函数
- Js版本的打老鼠游戏--这里简单用一个图标表示老鼠 关键字:js对表格进行动态创建
- 极大似然估计和贝叶斯估计
- JS版本的小游戏,Dom技术的全方位应用
- html5新手入门---来自于对www.w3cschool.com的总结。
- jquery的一揽子缩放图片的方法以及需要的集体文件---感谢前辈们的精彩奉献
- 关于javascript面向对象的编程和构造器的简单创建
- JavaScript对象内联函数的使用,对象内部方法和属性的使用,以及事件冒泡的处理方式
- Ajax跨域问题浏览器兼容性的模拟和解决
- html中相对(relative),绝对(absolute)位置以及float的学习和使用案例
- eval()与jQuery.parseJSON()的差别以及常见的解析缺少分号的问题
- Linux 用作 IPv6 网关
- 一个简单的通过上下左右键移动div的案例--可用于游戏的用户操作界面
- [Cocos2D-X官方文档]:多分辨率的支持