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/#