jQuery实现div方框内大图自由拖拽

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。<div id="imageView_container"> <img src="image-800x500.jpg" rel="image-1680x1050.jpg"/></div>

4、书写css代码。

<style>

body {background-color: #555;color: #fff;}

a {color: #fff;text-decoration: none;outline: none;}

a:hover {color: #fff;text-decoration: underline;}

a img { border: none;}

#imageView_container {border: 2px solid #000; margin:0 auto; overflow:hidden;}

#imageView_container.iv-loading {border: 2px solid #f00;}

</style>

5、书写并添加js代码。

<script src="jquery.js"></script>

<script src="jquery.imageView.js"></script>

<script>

$(function() {

$('#imageView_container').imageView({width: 800, height:500});

});

</script>

6、代码整体结构。

7、查看效果。