Сделать содержимое div в подвижную кнопку с изменяемым размером
Это классическая путаница ссылки на переменную Python. Что я действительно хотел сделать, чтобы понять это, хотя и печатает ссылку, чтобы увидеть, что происходит.
def change(elements):
elements[0] = 888
print("ID of elements is: %d",id(elements))
elements = [-3, -1, -2, -3, -4]
print("ID of elements is: %d",id(elements))
print(elements[0])
numbers = [1, 4, 5]
print("ID of number is: %d",id(numbers))
print(numbers[0])
change(numbers)
print(numbers[0])
print(numbers)
>>>> ('ID of number is: %d', 140036366181584)
1
('ID of elements is: %d', 140036366181584)
('ID of elements is: %d', 140036366181944)
-3
888
[888, 4, 5]
Идентификатор здесь представляет собой размещение в памяти. Если вы запустите код, число может отличаться, но поведение остается прежним.
В основном, когда вы вызываете
elements[0] = 888
Вы на самом деле мутируете numbers (тот же идентификатор 140036366181584 в моем примере).
Но , когда вы вызываете
elements = [-3, -1, -2, -3, -4]
. Вы создаете новый список (в моем примере - другой идентификатор 140036366181944) и перенаправляете ему локальное имя elements. Просто присвойте имя elements другому объекту. Это уже не тот список.
Итак, на этом этапе все, что вы сделали с numbers, изменило свой первый индекс со значением 888, и это то, что результат показывает эмпирически.
1 ответ
Хорошо, я сделал это так
http://jsfiddle.net/eLron3d2/2/
Я завернул все в кнопку и изменил довольно много всего до% нефиксированных размеров. Я могу изменить его размер и положение в .target css
. Он работает довольно хорошо, за исключением того, что я хотел бы изменить размер шрифта для автоматического изменения, чтобы соответствовать, но это легко сделать с медиа-запросами. по крайней мере, мне не нужно все менять. Единственное, шрифт не загружается и не отображается должным образом в jsfiddle, но работает во всех браузерах, с которыми я его проверял.
HTML для 2 кнопок -
<button class="btn target animated fadeIn"><span id="btn1" class="btnimage animated rubberBand" onclick="golive()"></span><span class="btn1textbox animated bounceInLeft"></span><span id="status" class="btn1text animated delaydn fadeIn">START</span></button>
<button class="btn target animated fadeIn delaybox"><img class="driverimg animated fadeIn" src="http://www.faces2places.co.uk/img/jules.jpg" onclick="alert('FUCKME')"></img><span class="btn1textbox animated bounceInLeft delaybox"></span><span id="status" class="btn1text animated delaydn2 fadeIn">JUSTIN.C</span></button>
CSS -
.btn {
position: relative;
display: block;
margin-bottom:12px;
color: white;
font-size: 16px;
cursor: pointer;
border: 2px solid;
padding: 0px;
box-shadow: 0px 0px 0px 0px;
width:80px;
height:80px;
background-color: white;
border-color: #969696;
border-radius: 5px 5px 5px 5px
}
.target {
left:100px;
width:80px;
height:80px;
top:100px;
}
.btn1textbox {
position: absolute;
left: 5%;
top: 92%;
display: inline-block;
color: white;
border: 2px solid;
width: 86.5%;
height: 16%;
background-color: white;
border-color: #969696;
border-radius: 5px 5px 5px 5px
}
/* Darker background on mouse-over */
.btn:hover {
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.btnimage {
position: relative;
background:url(https://www.faces2places.co.uk/img/target.png) no-repeat center;
display: inline-block;
width:100%;
height:100%;
background-size: 80% 80%;
top:-4px;
}
.btndriver {
position: relative;
display: inline-block;
width:100%;
height:100%;
background-size: 80% 80%;
}
.btn1text {
font-family: 'Passion One', cursive;
color:green;
position: relative;
display: inline-block;
width:100%;
height:100%;
top: -12px;
font-size: 13px;
}
.goliveactive {
animation-duration: 30000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: spin;
}
.delaydn {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: .8s;
}
.delaybox {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: .5s;
}
.delaydn2 {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: 1.3s;
}
button:focus {outline:0;}
.driverimg {
position:relative;
top:-1;
border-radius: 2.5px;
display:inline-block;
width:100%;
height:100%;
}
, а JS -
new WOW().init();
window.live = false;
window.directions = true;
function golive() {
if (window.live === false) {
$("#btn1").addClass("goliveactive");
$('#status').css('color', '#ff3258');
$('#status').text('FINISH');
window.live = true;
} else if (window.live = true) {
$("#btn1").removeClass("goliveactive ");
$('#status').css('color', 'green');
$('#status').text('START');
window.live = false;
}
}