鼠标放上去图片变大 -

snowdymy

浏览: 142886 次
性别:
来自: 上海

最近访客更多访客>>

angel20082008

五音谷

songbj

ericzhang19840

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

鼠标放上去图片变大

博客分类：

JQuery

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Simple photo manager</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.droppable.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: right; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 100%; cursor: move; }

#trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
#trash h4 .ui-icon { float: left; }
#trash .gallery h5 { display: none; }
</style>
<script>
$(function() {
  // there's the gallery and the trash
  var $gallery = $( "#gallery" ),
   $trash = $( "#trash" );
/*
  // let the gallery items be draggable
  $( "li", $gallery ).draggable({
   cancel: "a.ui-icon", // clicking an icon won't initiate dragging
   revert: "invalid", // when not dropped, the item will revert back to its initial position
   containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
   helper: "clone",
   cursor: "move"
  });

  // let the trash be droppable, accepting the gallery items
  $trash.droppable({
   accept: "#gallery > li",
   activeClass: "ui-state-highlight",
   drop: function( event, ui ) {
    deleteImage( ui.draggable );
   }
  });

  // let the gallery be droppable as well, accepting items from the trash
  $gallery.droppable({
   accept: "#trash li",
   activeClass: "custom-state-active",
   drop: function( event, ui ) {
    recycleImage( ui.draggable );
   }
  });

  // image deletion function
  var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
  function deleteImage( $item ) {
   $item.fadeOut(function() {
    var $list = $( "ul", $trash ).length ?
     $( "ul", $trash ) :
     $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );

    $item.find( "a.ui-icon-trash" ).remove();
    $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
     $item
      .animate({ width: "48px" })
      .find( "img" )
       .animate({ height: "36px" });
    });
   });
  }

  // image recycle function
  var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
  function recycleImage( $item ) {
   $item.fadeOut(function() {
    $item
     .find( "a.ui-icon-refresh" )
      .remove()
     .end()
     .css( "width", "96px")
     .append( trash_icon )
     .find( "img" )
      .css( "height", "72px" )
     .end()
     .appendTo( $gallery )
     .fadeIn();
   });
  }
*/
  // image preview function, demonstrating the ui.dialog used as a modal window
  function viewLargerImage( $link ) {
   var src = $link.attr( "href" ),
    title = $link.siblings( "img" ).attr( "alt" ),
    $modal = $( "img[src$='" + src + "']" );

   if ( $modal.length ) {
    $modal.dialog( "open" );
   } else {
    var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
     .attr( "src", src ).appendTo( "body" );
    setTimeout(function() {
     img.dialog({
      title: title,
      width: 400,
      modal: true
     });
    }, 1 );
   }
  }

  // resolve the icons behavior with event delegation
  $( "ul.gallery > li" ).click(function( event ) {
   var $item = $( this ),
    $target = $( event.target );

   if ( $target.is( "a.ui-icon-trash" ) ) {
    deleteImage( $item );
   } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
    viewLargerImage( $target );
   } else if ( $target.is( "a.ui-icon-refresh" ) ) {
    recycleImage( $item );
   }

return false;
});
});
</script>
</head>
<body>

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">High Tatras</h5>
  <img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
  <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>

</li>
<li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">High Tatras 2</h5>
  <img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
  <a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>

</li>
<li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">High Tatras 3</h5>
  <img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
  <a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>

</li>
<li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">High Tatras 4</h5>
  <img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
  <a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>

</li>
</ul>

</body>
</html>

分享到：

Java 文件拷贝 | Jquery UI sortable.html

2011-10-14 00:46
浏览 1280
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

鼠标放上去图片变大

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

鼠标放上去图片变大

评论

发表评论

相关推荐

Jquery UI sortable.html

Jquery Ui 日期控件

Jquery Ui 自动完成

Jquery UI 封装 Alert框

Jquery 动态发送Ajax请求，接受Jason格式的数据

JQuery 生成标签效果

JQuery 选择、过滤器

JavaScript Tab

事件模仿

获得事件、对象、属性

点击展开，点击关闭 鼠标滑过

节点操作 （三）

节点操作（一） 节点的添加、删除、修改、查询

元素选择器（三） 基本过滤选择器

最近访客更多访客>>

点击展开，点击关闭鼠标滑过

节点操作（三）

节点操作（一）节点的添加、删除、修改、查询

元素选择器（三）基本过滤选择器