- 浏览: 139899 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
ling凌yue月:
Yes,it's good!
JavaScript实现ReplaceAll 方法 -
lj1214388:
请问楼主,我导入了struts-jquery-plugin 的 ...
Jquery Ui 日期控件
鼠标放上去图片变大
- 博客分类:
- 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>
<div class="demo ui-widget ui-helper-clearfix">
<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>
发表评论
-
Jquery UI sortable.html
2011-10-14 00:38 999<!DOCTYPE html><html l ... -
Jquery Ui 日期控件
2011-10-14 00:28 4110<!DOCTYPE html><html l ... -
Jquery Ui 自动完成
2011-10-13 23:40 1096<!DOCTYPE html><html l ... -
Jquery UI 封装 Alert框
2011-10-13 23:36 1130<!DOCTYPE html><html l ... -
Jquery 动态发送Ajax请求,接受Jason格式的数据
2011-09-28 15:31 2636Jason数据格式: [{"title" ... -
JQuery 生成标签效果
2010-09-22 09:26 1105ul,li{ margin: 0; padding: 0; ... -
JQuery 选择、过滤器
2010-09-18 20:24 774$(”#myELement”) —— 选择id值等于myEle ... -
JavaScript Tab
2010-09-17 12:19 47<style type="text/css ... -
事件模仿
2010-09-15 23:01 719$(function(){ $('#old').bi ... -
获得事件、对象、属性
2010-09-15 22:52 801<a href='http://google.com'& ... -
点击展开,点击关闭 鼠标滑过
2010-09-15 21:20 1369HTML 代码如下; <body> <div ... -
节点操作 (三)
2010-09-14 23:13 974遍历节点树 $(function(){ var ... -
节点操作(一) 节点的添加、删除、修改、查询
2010-09-14 22:20 944查找节点 $(function(){ var $ ... -
元素选择器(三) 基本过滤选择器
2010-09-14 22:03 846基本过滤选择器 $(document).ready(fun ...
相关推荐
鼠标放上去显示大图的两种方式 CSS+js
Flash图片放大特效,鼠标放上去背景图片放大显示,鼠标移走后,慢慢恢复显示,这种放大是按比例放大,图片的比例不会失真,不过若被放大的图片像素不高,在放大倍数较大的情况下,还是会失真的。
JAVASCRIPT鼠标放上去局部放大特效,是多个图片组合的图片集;由WWW.CHE2.COM整理
jquery实现鼠标滑过模糊图片变清晰的效果
图片上下左右自动滚动鼠标放上去停止效果。
图片切换,鼠标放上去图片放大,所有图片排列成圆形,
鼠标放上去上下自动滚动,带缓动效果,很炫,适合各类需要的地方
鼠标移上去显示大图的代码,网页特效鼠标移上去显示大图的代码,网页特效鼠标移上去显示大图的代码,网页特效
jQuery 图片 相册 效果看得见
介绍: default gray mouse hover colorful css style
New Document ul{ list-style:none; } a{ padding-left:1.5em;font-size:12px;height:23px;line-height:23px;color:gray;text-decoration:none;... background:url(/article/upimages/bbs_bg_off.gif);...
鼠标移上去换图片,鼠标移上去换图片,鼠标移上去换图片,鼠标移上去换图片
仿淘宝的一种鼠标悬浮商品之后图片被放大。采用jquery实现,非常简单,思路清晰。
网页特效js效果,鼠标放上去就知道不一样的效果,几张图片的切换,真漂亮
默认图片是灰色鼠标放上去变彩色css效果代码! 很值得下载看看!资源免费,大家分享!!
NULL 博文链接:https://jeasonjack.iteye.com/blog/1630252
鼠标移动到图片上后,图片上加入一层灰色的蒙版,模仿天猫商城的图片展示特效
利用jQuery实现图片列表鼠标放上去显示图片内容描述 简单的图片横向列表,用户可以左右变换数量 没人是隐藏的,鼠标放上去显示,鼠标移开转为隐藏
一款非常漂亮的CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效,当鼠标滑过图片时,图片上方会覆盖一层渐变颜色的蒙版,移开图片蒙版又会以渐变的方式消失,视觉效果相当好看。