jQuery图片拖拽缩放预览代码.zip资源-CSDN文库

共8个文件

png：3个

js：2个

css：1个

版权申诉

jQuery特效

CSS特效

网页特效

95 浏览量 2023-10-15 00:01:52 上传评论收藏 72KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery图片拖拽缩放预览代码.zip （8个子文件）

jiaoben7389

drag-move.js 2KB

jquery.min.js 91KB

css

style.css 1KB

index.html 2KB

images

drag.png 550B

3457.jpg 39KB

scale-small.png 159B

scale-big.png 175B

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery图片拖拽缩放预览代码 - 【更多源码：www.96flw.com】</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> </head> <body> <div class="drag"> <div class="drag-action"> <img src="./images/scale-big.png" alt="+" class="scale-big"> <img src="./images/scale-small.png" alt="-" class="scale-small"><br /> <img src="./images/drag.png" alt="方向" class="direction"> <div class="arrow up" data-arrow="moveUp"></div> <div class="arrow right" data-arrow="moveRight"></div> <div class="arrow down" data-arrow="moveDown"></div> <div class="arrow left" data-arrow="moveLeft"></div> </div> <div class="drag-box"> <img src="./images/3457.jpg" alt="拖拽图" class="drag-img"> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/drag-move.js"></script> <script type="text/javascript"> var drag = $(".drag-img") var dragImg = new DragScale(drag, drag) // 拖动 dragImg.drag() // 滚轮 $(".drag-box").on("mousewheel", function() { dragImg.scale(0) }) // 放大 $(".scale-big").click(function() { dragImg.scale(1) }) // 缩小 $(".scale-small").click(function() { dragImg.scale(2) }) // 上下左右点击 $(".arrow").click(function() { dragImg[$(this).data("arrow")]() }) </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉