jQuery点击图片放大拖动查看效果
程序员文章站
2022-06-18 23:36:13
效果如图： 放大前： 放大后(可拖动图片浏览)： 源码如下： js资源下载地址：https://pan.baidu.com/s/1ew7iernrBAWZ0kuhr21s0A#list/path=%2F ......
效果如图：
放大前：
放大后(可拖动图片浏览)：
源码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jquery点击图片拖动放大查看效果</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.imageview.js"></script>
<script type="text/javascript">
$(function () {
$('#imageview_container').imageview({ width: 850, height: 708 });
});
</script>
<style type="text/css">
body {
background-color: #555;
color: #fff;
}
a img {
border: none;
}
#imageview_container {
border: 2px solid #000;
margin: 0 auto;
}
#imageview_container.iv-loading {
border: 2px solid #ff6600;
}
</style>
</head>
<body>
<div id="imageview_container" class="" style="width: 850px; height: 708px; overflow: hidden; position: relative; cursor: -moz-zoom-in;">
<img src="http://www.xwcms.net/webanneximages/fileannex/201506/27268/images/12awe51.jpg" rel="http://www.xwcms.net/webanneximages/fileannex/201506/27268/images/sad2.jpg" alt="" id="image_view_1" style="visibility: visible; position: absolute; left: 0px; top: 0px;">
</div>
</body>
</html>
js资源下载地址：https://pan.baidu.com/s/1ew7iernrbawz0kuhr21s0a#list/path=%2f
下一篇： Web应用架构入门之11个基本要素