Question

我了解HTML和CSS的一些知识，但是我想构建代码，以在单击后将元素移动一定数量的像素，然后在再次单击后将其返回。

我拥有的两个网站是： http://www.miguelonenterprises.com/2018roadtrip.htm http://www.miguelonenterprises.com/wrap6.css。

现在，我将其设置为悬停属性。

我发现此网站可能具有以下答案：http://jsfiddle.net/fgvr2/] 1

$(function(){
    $('.box').on('click',function(){
       $(this).toggleClass('clicked');
    });
});

我可以很好地集成CSS和HTML。但是我不知道如何集成JavaScript / JQuery元素。

任何帮助将不胜感激。

谢谢。

Answer 1

当您点击for i in 1...1000000000 { print(i) self.title = "\(i)" }时，您可以toggle一个类，这会使element降低特定数量的像素。您还需要为属性添加element，该属性应在更改时开始过渡（在本例中为transition-duration）。

top

$(function(){
    $('.movingBox').on('click',function(){
       $(this).toggleClass('clicked');
    });
});

.movingBox{
  background-color: green;
  width: 100px;
  height: 100px;
  position: fixed;
  border: 1px solid red;
  top: 10px;
  transition: top 1s;
}

.clicked{
  position: fixed;
  top: 100px;/*whatever number of pixels you want the div to be from the top of the page*/
}

Answer 2

假设您已将CSS position属性设置为<textarea id="addNodeInput" placeholder="Node Name"></textarea> <button id="addNode" onclick="addNode();">Add N</button> <button id="deleteNode" onclick="deleteNode();">Del N</button> <button id="addLink" onclick="addLink();">Add L</button> <button id="deleteLink" onclick="deleteLink();">Del L</button> <div id="nodeConsole"></div> <select id="linkedNodes" size="4"> </select> <select id="srcNodes" size="8"> </select> <select id="targetNodes" size="8"> </select> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var cmd = ""; var inNode = document.getElementById("addNodeInput"); var out = document.getElementById("nodeConsole"); function display() { out.value = "Node Operations"; out.innerHTML = cmd + out.innerHTML; cmd = ""; } function deleteNode() { var x = document.getElementById("srcNodes"); var y = document.getElementById("targetNodes"); if (x.length > 0) { var sel = x.selectedIndex; x.remove(sel); y.remove(sel); } } function addLink() { var x = document.getElementById("srcNodes"); var y = document.getElementById("targetNodes"); var link = document.createElement("option"); var l = document.getElementById("linkedNodes"); link.text = x.value + "<->" + y.value; l.add(link); } function deleteLink() { var x = document.getElementById("linkedNodes"); if (x.length > 0) { x.remove(x.selectedIndex); } } function addNode() { var n = inNode.value; //cmd = ">>>" + n + "<br />"; //display(cmd); inNode.value = ""; inNode.focus(); var s = document.getElementById("srcNodes"); var t = document.getElementById("targetNodes"); var option = document.createElement("option"); var option2 = document.createElement("option"); option2.text = n; t.add(option2); option.text = n; s.add(option); addNodeCanvas(n); } </script>，则可以在没有jquery的JavaScript中轻松完成。假设您元素的HTML ID为absolute。在JavaScript中，您可以执行以下操作：

example

在代码中，应该清楚单击后如何将其恢复到原始位置。如果不是，我鼓励您学习一些JavaScript here。

Answer 3

一种方法。切换class并将transition-duration添加到移动元素。

/* Copy this content to a js file. Example "click.js" */

$('.myWrapper').on('click', () => {
  $('.myMover').toggleClass('addMargin');
});

/* Copy this content to a css file. Example click_style.css */    

.myWrapper {
  width: 100px;
}

.myText {
  background-color: #FF9800;
  padding: 10px;
  border-radius: 10px 10px 0 0;
}

.myMover {
  transition-duration: 1s;
  border-radius: 0 0 10px 10px;
  padding: 10px;
  background-color: #FF9800;
}

.addMargin {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Load the css and js from files (place in <head></head> of your html-file)-->
<script type="text/javascript" src="click.js"></script>
<link rel="stylesheet" type="text/css" href="click_style.css" />

<div class="myWrapper">
  <div class="myText">
    Some Text
  </div>
  <div class="myMover">
    I'm moving!
  </div>
</div>

Onclick事件将元素向下移动特定数量的像素

3 个答案: