jquery - 是否可以放大和缩小 div 的内容？

Question

我正在尝试制作一个类似于谷歌地图的系统，并使用 div 的内容进行平移和缩放。这个 div 将有不同的按钮、链接和图像。我只是找不到不使用画布的方法。关于如何做到这一点的任何想法？

score 1 · Accepted Answer

只需将“zoomTarget”添加到单击时要缩放到的元素：

   <div class=""zoomTarget">This element zooms when clicked on.</div>

您还可以添加一些额外的属性来调整动画作为元素的数据字段：

 <div class="zoomTarget" data-targetsize=lass="0.45" data-duration="600">This element zooms when clicked on.</div>

来自源 Zoomooz.js

score 0 · Accepted Answer

我使用参考创建了一个简单的放大缩小 div（http://jsfiddle.net/tamilselvanA/05erzotj/5/）（https://rbalajiprasad.blogspot.in/2012/02/zoom-in-zoom-出 jquery.html）。

$(document).ready(function() {
  var currZoom = $("#divpnlChart").css("zoom");
  if (currZoom == 'normal') currZoom = 1;

  $(".zoomIn").click(function() {
    currZoom *= 1.2;
    $("#divpnlChart").css("zoom", currZoom);
    $("#divpnlChart").css("-moz-transform", "Scale(" + currZoom + ")");
    $("#divpnlChart").css("-moz-transform-origin", "0 0");

  });
  $(".zoomOff").click(function() {
    $("#divpnlChart").css("zoom", 1);
    $("#divpnlChart").css("-moz-transform", "Scale(" + currZoom + ")");
    $("#divpnlChart").css("-moz-transform-origin", "0 0");

  });
  $(".zoomOut").click(function() {
    currZoom *= .8;
    $("#divpnlChart").css("zoom", currZoom);
    $("#divpnlChart").css("-moz-transform", "Scale(" + currZoom + ")");
    $("#divpnlChart").css("-moz-transform-origin", "0 0");

  });
});

var down = false;
var scrollLeft = 0;
var x = 0;

$('#sd').mousedown(function(e) {
  down = true;
  scrollLeft = this.scrollLeft;
  x = e.clientX;
}).mouseup(function() {
  down = false;
}).mousemove(function(e) {
  if (down) {
    this.scrollLeft = scrollLeft + x - e.clientX;
  }
}).mouseleave(function() {
  down = false;
});

#sd {
  border: 1px solid black;
  height: 1200px;
  margin: 50px auto;
  overflow: scroll;
  width: 500px;
}

#divpnlChart {
  height: 100px;
  width: 900px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="zoomIn" style="font-size:200%">+</span>
<br>
<span class="zoomOff">original</span>
<br>
<span class="zoomOut" style="font-size:250%">-</span>
<br>


<div id="sd">

  <div id="divpnlChart" style="float: left; width: 85%;">
   <div class="Normal">

  CHENNAI: Actor <a class="key_underline" href="https://timesofindia.indiatimes.com/topic/Kamal-Haasan" pg="AS1_InlineMedia#AS1_https://timesofindia.indiatimes.com/city/chennai/saffron-terrorism-kamal-haasan-says-right-wing-hindus-have-started-employing-terrorism/articleshow/61453672.cms~Kamal Haasan-https://timesofindia.indiatimes.com/topic/Kamal-Haasan">Kamal Haasan</a> has alleged that <a class="key_underline" href="https://timesofindia.indiatimes.com/topic/right-wing-Hindus" pg="AS1_InlineMedia#AS1_https://timesofindia.indiatimes.com/city/chennai/saffron-terrorism-kamal-haasan-says-right-wing-hindus-have-started-employing-terrorism/articleshow/61453672.cms~right wing Hindus-https://timesofindia.indiatimes.com/topic/right-wing-Hindus">right wing Hindus</a> have started employing terrorism to propagate their communal agenda.
  <br>
  <br>
  In his column in a Tamil magazine that hit stands on Thursday, the 62-year-old actor said the right-wingers could no longer say "show me a Hindu terrorist if you can." Terrorism has spread into their fold also, he said.
  <br>
  <br>
  "Earlier, the right-wing <a class="key_underline" href="https://timesofindia.indiatimes.com/topic/Hindus" pg="AS1_InlineMedia#AS1_https://timesofindia.indiatimes.com/city/chennai/saffron-terrorism-kamal-haasan-says-right-wing-hindus-have-started-employing-terrorism/articleshow/61453672.cms~Hindus-https://timesofindia.indiatimes.com/topic/Hindus">Hindus</a> employed debates, and not force, against people of other religions. Having realised that their attempts are failing, they have started using violence," he wrote.
  <br>
  <br>
  "This is not a victory or a sign of progress. If we start believing that force will prevail and not truth, then we will all turn into violent beasts," he wrote.
  <br>
  <br>
  In his column, Kamal was replying to a question posed by <a class="key_underline" href="https://timesofindia.indiatimes.com/india/kerala" pg="AS1_InlineMedia#AS1_https://timesofindia.indiatimes.com/city/chennai/saffron-terrorism-kamal-haasan-says-right-wing-hindus-have-started-employing-terrorism/articleshow/61453672.cms~Kerala-https://timesofindia.indiatimes.com/india/kerala">Kerala</a> chief minister <a class="key_underline" href="https://timesofindia.indiatimes.com/topic/Pinarayi-Vijayan" pg="AS1_InlineMedia#AS1_https://timesofindia.indiatimes.com/city/chennai/saffron-terrorism-kamal-haasan-says-right-wing-hindus-have-started-employing-terrorism/articleshow/61453672.cms~Pinarayi Vijayan-https://timesofindia.indiatimes.com/topic/Pinarayi-Vijayan">Pinarayi Vijayan</a> who had sought the actor's opinion on "the attempt by Hindutva forces to infiltrate into <a class="key_underline" href="https://timesofindia.indiatimes.com/india/tamil-nadu" pg="AS1_InlineMedia#AS1_https://timesofindia.indiatimes.com/city/chennai/saffron-terrorism-kamal-haasan-says-right-wing-hindus-have-started-employing-terrorism/articleshow/61453672.cms~Tamil Nadu-https://timesofindia.indiatimes.com/india/tamil-nadu">Tamil Nadu</a>."
  <br>
  <br>
  Kamal wrote: "Only change is permanent. No matter how many forces push it back, Tamil Nadu will once again prevail as the forerunner in social reforms. Kerala is standing as an example today. Congrats for that."
  <br>
  <div class="last8brdiv"><div class="sponsor_block clearfix loaded" style="display: none;"><ul class="colombiaSuccess " id="129146-614536721" data-skew="0" data-ad-size="[0,370]" data-expansion-size="[0,480]" data-adwidth="640" data-adheight="360" data-loop="0" data-cb="processCtnAds" data-callback="sponsorAdSuccess" data-position="614536721" data-slot="129146" data-autoplay="false" data-native-vid-tmpl="ctn_belly_vid" data-native-tmpl="ctn_midarticle" data-desc-len="90" style="display: block; width: 100%;"><li><a href="https://ade.clmbtech.com/evnt/click.htm?r=MjExMTI4YjYtZGUwOS00OWQ4LTkwOTAtZTRlMmY4YzYzMGRhLTEwb253OjEyOTE0NjphbGwsNXE2LDV4cSw5bmo6MTQ3MDIwMTg6MjE6MTMzMTAzOTo3MzM6OjoxLjA2OjA6NjE0NTM2NzIxOjE6Mjk1NjI6MDo6OjI6MTIxLjIwMC41NC4yMDY6TW96aWxsYS81LjAgKFdpbmRvd3MgTlQgMTAuMDsgV2luNjQ7IHg2NCkgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzYxLjAuMzE2My4xMDAgU2FmYXJpLzUzNy4zNjo6MC4wOjA6MDo4ODQtMToxNjoxOjA6MDo0Ojo6MTUwOTYyMDkyODc2MjpmYWxzZQ&amp;fpc=99e43293-2827-4598-9d0d-c435bc993f90-10o79&amp;i=U932w528X919&amp;s=https%253A%252F%252Ftimesofindia.indiatimes.com%252Fcity%252Fchennai%252Fsaffron-terrorism-kamal-haasan-says-right-wing-hindus-have-started-employing-terrorism%252Farticleshow%252F61453672.cms&amp;u=http%3A%2F%2Fwww.zeeayurveda.com"><img src="https://static.clmbtech.com/ctn/29562/images/1/4d5ffb68e4894fba91c1c7d591c0e194_1492689364595_0.jpg"><span>Improve your power, vigor, vitality &amp; stamina</span><i class="sponsor">ZEEAYURVEDA</i></a></li><li><a href="https://ade.clmbtech.com/evnt/click.htm?r=MjExMTI4YjYtZGUwOS00OWQ4LTkwOTAtZTRlMmY4YzYzMGRhLTEwb253OjEyOTE0NjphbGwsNXE2LDV4cSw5bmo6MTcyNDAwMDY6MjoyMTMyNzkyOjczMzo6OjIuMzY3OTQ4MTAxODkxNzIxOjA6NjE0NTM2NzIxOjE6NDI2OTg6MDo6OjI6MTIxLjIwMC41NC4yMDY6TW96aWxsYS81LjAgKFdpbmRvd3MgTlQgMTAuMDsgV2luNjQ7IHg2NCkgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzYxLjAuMzE2My4xMDAgU2FmYXJpLzUzNy4zNjo6MC4wOjA6MDoyNTMxLTE6MTY6MTowOjA6NDo6OjE1MDk2MjA5Mjg3NjI6ZmFsc2U&amp;fpc=99e43293-2827-4598-9d0d-c435bc993f90-10o79&amp;i=U932w528X919&amp;s=https%253A%252F%252Ftimesofindia.indiatimes.com%252Fcity%252Fchennai%252Fsaffron-terrorism-kamal-haasan-says-right-wing-hindus-have-started-employing-terrorism%252Farticleshow%252F61453672.cms&amp;u=http%3A%2F%2Fwww.custom-trackx.com%2Fa860c2d2-aed7-4e80-a5e4-3faf4641310f%3Fadid%3Ddx15%26head%3DBurn_upto_20_kgs_with_this_easy_method%26imag%3D20"><img src="https://static.clmbtech.com/ctn/42698/images/1/14273eeb71eb1757d2034faf2bebde5a_1508757357992_0.jpg"><span>Burn upto 20 kgs with this easy method.</span><i class="sponsor">Nutralyfe</i></a></li></ul><div class="alR"><span class="clmblogo">Recommended By Colombia<i class="clmcup"></i></span></div></div></div><br>
  Kamal pointed out that Tamil Nadu's Dravidian tradition is thousands of years old and said the social revolution brought on by Ramanujam 1,000 years ago is a landmark.
  <div class="last7brdiv"></div><br>
  <div class="last6brdiv"></div><br>
  Kamal wrote, "There is no possibility that the attempt by fascists to shift the world towards the right will succeed. The shift towards the right is only a temporary fashion, a cosmetic change. It will not last. The backward old generation, particularly those belonging to the upper castes, which is rattled by the equality evolving in society, is trying to feed their caste-driven, backward ideology to the young generation by sugar coating it and presenting it as a modern idea."
  <div class="last5brdiv"></div><br>
  <div class="last4brdiv" data-topcmt-status="true"><div class="show_wdgt topcomment" data-plugin="show-comments"><div class="msg"><h2><span>Top</span> Comment</h2><span class="cmnttxt">if Hindus would have adapted terrorism, then shameless chapa like him would not existed.</span><span class="cmntauthor">OMSM</span></div><input type="button" data-plugin="show-comments" data-type="allcomment" class="btn" value="See All Comments" pg="TopComment#SeeAllComments#https://timesofindia.indiatimes.com/city/chennai/saffron-terrorism-kamal-haasan-says-right-wing-hindus-have-started-employing-terrorism/articleshow/61453672.cms"><input type="button" data-plugin="show-comments" data-showtype="autofocus" data-type="addcomment" class="btn" value="Add Comment" pg="TopComment#AddComment#https://timesofindia.indiatimes.com/city/chennai/saffron-terrorism-kamal-haasan-says-right-wing-hindus-have-started-employing-terrorism/articleshow/61453672.cms"></div></div><br>
  Stating that the affinity that human race has towards science and wisdom will draw them towards rationalism despite opposition, Kamal said, "The youth in the state are not waiting for the change to happen. They have stepped into the fray to protect Tamil Nadu."
  <div class="last3brdiv"></div><br>
  <div class="last2brdiv"></div><br>
  According to him, the conservatives are not stressing on what needs to be learned from the past tradition. "Destroying agriculture for commercial gains and selling mythology as history are evils they have been tirelessly carrying forward for ages," he wrote.
  <div class="last1brdiv"></div><br>
  <br>
  

</div>
  </div>
</div>

jquery - 是否可以放大和缩小 div 的内容？

2 回答 2

Related

Reference