js写拖拽图片进行复制到另一个div里，再把复制的图片到div里进行随意拖动放大缩小，

随_声 2019-07-11 04:01:54
新手一枚，js写拖拽图片进行复制到另一个div里，再把复制的图片到div里进行随意拖动放大缩小，注意原图不能放大。因为图片有很多张，我写完拖拽复制到另一个div里，但是写放大缩小的时候就是写不好了
...全文
393 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
随_声 2019-07-11
  • 打赏
  • 举报
 回复
引用 2 楼 丰云 的回复:
参考我的博客： https://blog.csdn.net/foren_whb/article/details/95493115
但问题还是没解决
随_声 2019-07-11
  • 打赏
  • 举报
 回复
引用 2 楼 丰云 的回复:
参考我的博客： https://blog.csdn.net/foren_whb/article/details/95493115
谢谢大佬
丰云 2019-07-11
  • 打赏
  • 举报
 回复


参考我的博客：
https://blog.csdn.net/foren_whb/article/details/95493115
随_声 2019-07-11
  • 打赏
  • 举报
 回复
我写的代码，大佬们看看
<link href="../css/swiper.min.css " rel="stylesheet">
<link rel="stylesheet" href="../css/fli.css">
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<!-- 响应式布局网格样式 -->
<style type="text/css">
.row {
width: 55%;
height: 500px;
margin-left: 400px;
background-color: gray;
}

#two {
border: 1px solid #000;
width: 524.8px;
height: 249.8px;
}

#col-xs-6-three {
width: 600px;
height: 500px;
border: 1px solid #000;
}

#three {
width: 448.5px;
height: 166.5px;
border: 1px solid #000;
}

#four-one {
width: 702.8px;
height: 332px;
border: 1px solid #000;
}

#four {
width: 352px;
height: 166px;
border: 1px solid #000;
}

#five {
height: 166.5px;
border: 1px solid #000;
}

#six {
height: 125px;
border: 1px solid #000;
}
</style>

<!-- 尾部轮播样式 -->
<style type="text/css">
.navs {
width: 1100px;
height: 160px;
margin-left: 390px;
position: relative;
cursor: pointer;
margin-top: 5px;
overflow: hidden;
}

.navs #nav-alls {
width: auto;
height: 160px;
position: absolute;
left: -30px;
}

.navs .nav-is {
width: 194px;
height: 158px;
background: #fff;
float: left;
margin-left: 30px;
}

.navs .nav-imgs {
text-align: center;
padding-top: 11px;
}

.navs .nav-names {
width: 192px;
height: 30px;
background: #f2f2f2;
text-align: center;
margin-top: -33px;
line-height: 30px;
}

.navs .nav-names a {
font-size: 16px;
font-family: '微软雅黑';
color: #fff;
padding-left: 10px;
cursor: pointer;
}

.navs .nav-names a:hover {
color: #4a7abe;
}

#lasts {
position: absolute;
left: 320px;
top: 850px;
}

#nexts {
position: absolute;
right: 420px;
top:850px;
}

.last-nexts {
cursor: pointer;
}

.last-nexts span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #fff;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 60px;
color: #000;
opacity: 0.5;
border: 1px solid #fff;
}

#n-imgs {
max-width: 100%;
max-height: 100%
}
</style>
<style type="text/css">
.chr{cursor:e-resize;}
.cvr{cursor:s-resize;}
.cner{cursor:ne-resize;}
.cnwr{cursor:nw-resize;}
.cdft{cursor:default;}
.cmove{cursor:move;}
</style>
</head>
<body>
<div class="example duo" id="example_nav_header">
<div class="example__demo duo__cell">
<div class="carousel carousel--show-several carousel--selected-cell"
data-flickity="{ "groupCells": true }"
style="left: 450px !important;">
<div class="carousel-cell">
<a href="javascript:;" id=btn1> <img src="../image/p1.png"
style="position: absolute; width: 131px; height: 140px;" />
</a>
</div>
<div class="carousel-cell">
<a href="javascript:;" id=btn2> <img src="../image/p1.png"
style="position: absolute; width: 131px; height: 140px;" />
</a>
</div>
<div class="carousel-cell">
<a href="javascript:;" id=btn3> <img src="../image/p1.png"
style="position: absolute; width: 131px; height: 140px;" />
</a>
</div>

<div class="carousel-cell">
<a href="javascript:;" id=btn4> <img src="../image/p1.png"
style="position: absolute; width: 131px; height: 140px;" />
</a>
</div>
<div class="carousel-cell">
<a href="javascript:;" id=btn5> <img src="../image/p1.png"
style="position: absolute; width: 131px; height: 140px;" />
</a>
</div>
<div class="carousel-cell">
<a href="javascript:;" id=btn6> <img src="../image/p1.png"
style="position: absolute; width: 131px; height: 140px;" />
</a>
</div>

<div class="carousel-cell">
<a href="javascript:;" id=btn7> <img src="../image/p1.png"
style="position: absolute; width: 131px; height: 140px;" />
</a>
</div>
<div class="carousel-cell">
<a href="javascript:;" id=btn8> <img src="../image/p1.png"
style="position: absolute; width: 131px; height: 140px;" />
</a>
</div>
<div class="carousel-cell">
<a href="javascript:;" id=btn9> <img src="../image/p1.png"
style="position: absolute; width: 131px; height: 140px;" />
</a>
</div>

<div class="carousel-cell">
<a href="javascript:;" id=btn10> <img src="../image/p1.png"
style="position: absolute; width: 131px; height: 140px;" />
</a>
</div>
<div class="carousel-cell">
<a href="javascript:;" id=btn11> <img src="../image/p1.png"
style="position: absolute; width: 131px; height: 140px;" />
</a>
</div>
</div>
</div>
</div>
<!-- 预案 #9D9D9D一 -->
<div class="row one" id="div1" style="display: none;">
<div class="col-xs-12 col-sm-6 col-md-8"></div>
</div>

<!-- 预案二 -->
<div class="row two" id="div2" style="display: none;">
<div class="col-xs-6" id="two"></div>
<div class="col-xs-6" id="two"></div>
<div class="col-xs-6" id="two"></div>
<div class="col-xs-6" id="two"></div>
</div>

<!-- 预案三 -->
<div class="row three" id="div3" style="display: none;">
<div class="col-xs-6" id="col-xs-6-three"></div>
<div class="col-xs-6" id="three"></div>
<div class="col-xs-6" id="three"></div>
<div class="col-xs-6" id="three"></div>
</div>

<!-- 预案四 -->
<div class="row four" id="div4" style="display: none;">
<div class="col-xs-12 col-sm-6 col-md-8" id="four-one"></div>
<div class="col-xs-6 col-md-4" id="four"></div>
<div class="col-xs-6 col-md-4" id="four"></div>
<div class="col-xs-6 col-sm-4" id="four"></div>
<div class="col-xs-6 col-sm-4" id="four"></div>
<div class="col-xs-6 col-sm-4" id="four"></div>
</div>

<!-- 预案五-->
<div class="row five" id="div5">
<div class="col-xs-6 col-md-4" id="five"></div>
<div class="col-xs-6 col-md-4" id="five"></div>
<div class="col-xs-6 col-md-4" id="five"></div>
<div class="col-xs-6 col-sm-4" id="five"></div>
<div class="col-xs-6 col-sm-4" id="five"></div>
<div class="col-xs-6 col-sm-4" id="five"></div>
<div class="col-xs-6 col-sm-4" id="five"></div>
<div class="col-xs-6 col-sm-4" id="five"></div>
<div class="col-xs-6 col-sm-4" id="five"></div>
</div>

<!-- 预案六-->
<div class="row six" id="div6" style="display: none;">
<div class="col-xs-6 col-md-4" id="six"></div>
<div class="col-xs-6 col-md-4" id="six"></div>
<div class="col-xs-6 col-md-4" id="six"></div>
<div class="col-xs-6 col-sm-4" id="six"></div>
<div class="col-xs-6 col-sm-4" id="six"></div>
<div class="col-xs-6 col-sm-4" id="six"></div>
<div class="col-xs-6 col-sm-4" id="six"></div>
<div class="col-xs-6 col-sm-4" id="six"></div>
<div class="col-xs-6 col-sm-4" id="six"></div>
<div class="col-xs-6 col-sm-4" id="six"></div>
<div class="col-xs-6 col-sm-4" id="six"></div>
<div class="col-xs-6 col-sm-4" id="six"></div>
</div>
<div class="navs" id="navs">
<div id="nav-alls">
<div class="nav-is">
<div class="nav-imgs">
<img id="n-imgs" src="../image/p1.png" width="194px" height="145.5px"/>
</div>
<div class="nav-names">
<a>1号公路</a>
</div>
</div>
<div class="nav-is">
<div class="nav-imgs">
<img id="n-imgs" src="../image/p2.png" width="194px" height="145.5px"/>
</div>
<div class="nav-names">
<a>2号公路</a>
</div>
</div>
<div class="nav-is">
<div class="nav-imgs">
<img id="n-imgs" src="../image/p3.png" width="194px" height="145.5px"/>
</div>
<div class="nav-names">
<a>3号公路</a>
</div>
</div>
<div class="nav-is">
<div class="nav-imgs">
<img id="n-imgs" src="../image/p4.png" width="194px" height="145.5px"/>
</div>
<div class="nav-names">
<a>会议中心</a>
</div>
</div>
<div class="nav-is">
<div class="nav-imgs">
<img id="n-imgs" src="../image/p1.png" width="194px" height="145.5px"/>
</div>
<div class="nav-names">
<a>数据指挥</a>
</div>
</div>
<div class="nav-is">
<div class="nav-imgs">
<img id="n-imgs" src="../image/p1.png" width="194px" height="145.5px"/>
</div>
<div class="nav-names">
<a>4号公路</a>
</div>
</div>
<div class="nav-is">
<div class="nav-imgs">
<img id="n-imgs" src="../image/p1.png" width="194px" height="145.5px"/>
</div>
<div class="nav-names">
<a>5号公路</a>
</div>
</div>
</div>
</div>

<a class="last-nexts" id="lasts"> <span id="lefts"> < </span></a>
<a class="last-nexts" id="nexts"> <span id="rights"> > </span>
</a>

<!-- End demo 临时存储的一个框-->
<DIV class="demo-description" style="DISPLAY: none">
<P>Enable any DOM element to be droppable, a target for draggable
elements.</P>
</DIV>

<script src="../js/flickity-docs.min.js?2"></script>
<script type="text/javascript" src="../js/div_footer_nav.js"></script>
<script src="../js/nav_footer.js" type="text/javascript"
charset="utf-8"></script>

<script type="text/javascript">
var scrollPic_02 = new ScrollPic();
scrollPic_02.scrollContId = "nav-alls";//存放所有轮播元素的div
scrollPic_02.arrLeftId = "lasts"; //左箭头ID
scrollPic_02.arrRightId = "nexts"; //右箭头ID
scrollPic_02.frameWidth = 1102; //显示框宽 sfdasdfakfl;jlkajka;d度
scrollPic_02.pageWidth = 226; //翻页宽度
scrollPic_02.speed = 10; //移动速度(毫秒，越小越快)
scrollPic_02.space = 20; //每次移动像素(单位px，越大越快)
scrollPic_02.autoPlay = false; //自动播放:true|false
scrollPic_02.autoPlayTime = 2; //自动播放间隔时间(秒)
scrollPic_02.initialize(); //初始化
//--><!]]>
</script>
<script>
$(function() {
$( ".nav-imgs" ).draggable({
revert : 'invalid',
opacity : 0.7,
helper : 'clone',
scope : 'drop'
});
$( ".row" ).droppable({
scope : 'drop',
drop : function( event,ui ) {
var ud = ui.draggable;
if( ud.draggable( "option", "helper" ) == "clone" ) {
ud.clone()
.appendTo($( ".row" ))
.css({
position
DIV可移动 可实现任意拖动放大缩小
一个很好用的javaScript写的小程序，可实现div的拖动、变形。解压后直接拷到程序中就可运行
js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小js资源
js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小文件，在每个压缩包是一个，打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里，记事本打开查看
【web前端】bootstrap自适应定制，拖拽布局，一键生成页面
这里将介绍整个guiplan开发工具的使用以及前端布局的基础教程。常用的基本操作，如div操作，文字操作，图片操作，组件操作，生成html网页，保存html，css代码。通过拖拽，点击，快捷键等方式轻松绘制想要的静态页面。利用bootstrap框架进行自适应的定制，以及常用弹性盒子布局方式。零基础即可学会网页绘制。软件自动生成的代码也可以手动修改，方便进一步学习与了解前端知识。生成的代码符合w3c规范，也可进行二次开发。这节课讲解的是基本布局教程，不涉及到vue交互。设计师与产品经理也可以用此软件开始制作原型。
vue自定义指令-实现div和图片的拖拽，放大，缩小
vue自定义指令--实现div和图片的拖拽，放大，缩小，已封装成组件，下来导入后可直接使用
js完美实现同时拖拽、旋转、放大缩小图片的手势操作
使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能， 解决官网移动旋转复位效果， 重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑 又是复位又是旋转抖动的....双点触控就立马旋转造成抖动视觉效果的bug)
JavaScript

87,907

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章