<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>jQueryUI</title>
<style type="text/css">
#receptacle{width:800px;height:500px;background:#cde;position:relative;}
#receptacle .demo{width:80px;height:80px;position:absolute;}
.demo .cont{width:80px;height:80px;display:block;background:#07a;}
.demo-a{top:30px;left:122px;}
.demo-b{top:100px;left:400px;}
.icon-zoom {
position:absolute; width:63px; height:20px; overflow:hidden;
background:url(//img.jbzj.com/file_images/photoshop/201011/icon-zoom.png) no-repeat; cursor:pointer;
}
.icon-zoom span { width:20px; display:block; text-indent:-999em; float:left; }
</style>
<!--<script src="https://www.jb51.net/js/jquery.ui.core.js"></script>
<script src="https://www.jb51.net/jquery-1.4.4.min.js"></script>
<script src="https://www.jb51.net/jquery.ui.widget.js"></script>
<!-- 自定义的 -->
<script src="https://www.jb51.net/jquery.ui.wo.divZoom.js"></script>
<script type="text/javascript">
$(function() {
$('div.demo').divZoom({
target : '>a',
level : [80,120,160,200],
zooming : function(e,ui){
// console.log(e,ui.css);
},
start : function(e,ui){
console.log('开始',this,e.type,ui);
},
stop : function(e,ui) {
console.log('结束',ui.css);
}
});
});
</script>
</head>
<body>
<p>
<a href="https://www.cnblogs.com/ambar/archive/2010/11/12/how-to-user-jquery-ui-widget.html">原文</a>
</p>
<div>
<div>
<a href="#a">a</a>
</div>
<div>
<a href="#b">b</a>
</div>
</div>
</body>
</html>
您可能感兴趣的文章: