手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

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

时间:2024-11-02 06:48:07

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

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

2、新建html文档。

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

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

jQuery实现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>

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

5、书写并添加js代码。<script src="jquery.js"></script><script src="jquery.imageView.js"></script><script>$(function() { $('#imageView_container').imageView({width: 800, height:500});});</script>

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

6、代码整体结构。

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

7、查看效果。

jQuery实现div方框内大图自由拖拽
© 手抄报圈