页面图片变大

1.弹出层

jquery插件jquery-nyroModal-1.6.2弹出层

  $(function() {
        $("#addUser").nyroModal({
            width: 810,
            height: 520,
            minWidth: 810,
            minHeight: 520
        });
    });

给要弹出层的元素一个id，请求action，现实的页面就是弹出层的页面，如果有多张图片或者多个元素，可以复制

2.鼠标划过事件，让图片宽高改变

3.如果是多张图片，这种方法最实用

给所有href添加class="thumbmail",

添加thumbmail的样式

.thumbnail{ position: relative; z-index: 0; }

.thumbnail:hover{ background-color: transparent; z-index: 50; }

.thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; border: 1px solid red; padding: 1px; left: -1000px; visibility: hidden; color: black; text-decoration: none; }

.thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; }

.thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; left: 55px; /*position where enlarged image should offset horizontally */

}

在显示的图片中处理：

<a href="#" class="thumbnail" ><img src="include/images/IMG/3.jpg" width="120" height="80" /><span><img src="include/images/IMG/3.jpg"></span></a>

<a href="#" class="thumbnail" ><img src="include/images/IMG/3.jpg" width="120" height="80" /><span><img src="include/images/IMG/3.jpg"></span></a>

<a href="#" class="thumbnail" ><img src="include/images/IMG/3.jpg" width="120" height="80" /><span><img src="include/images/IMG/3.jpg"></span></a>

 

4.jquery图片点击

定义一个样式class

.aa{}

------------------------------------------

$(function(){
 $("img").each(function(){
  $(this).bind("click",function(){
            if($(this).hasClass("aa")){
              $(this).removeClass("aa");
          }else{
              $(this).addClass("aa");
           }
          })
     })
 })