Elektronik Devreler: Slider çubuğu ile resmi büyütme html kodu

Alttaki sürgüyü sağa veya sola iterek resimi zomlayın

Alttaki kodları kopyala yapıştır

<style>

input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
    width: 300px;
    height: 50px;
  border-left :20px solid blue;
  border-right :20px solid blue;
    background: red; /*   background: #024069; */
    border-radius: 2px;
    margin-top: 25px;
  
    outline: none;
}

input[type="range"]::-webkit-slider-thumb{
    cursor:url('cursor/hand_2.cur'), default;
    -webkit-appearance:none; 
    -moz-apperance:none; 
    width:100px; 
    height:40px;
    -webkit-border-radius:20px; 
    -moz-border-radius:20px; 
    -ms-border-radius:20px; 
    -o-border-radius:20px; 
    border-radius:20px;
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #d7d7d7), color-stop(0.51,

#d1d1d1), color-stop(1, #c8c8c8) );
    border: 1px solid #787878;
}

input[type="range"]::-webkit-slider-thumb:active{
cursor:url('cursor/hand_drag_3.cur'), default;
}

#mayResim{
cursor: url('cursor/sticky_5.cur'), default;
width:220px;
-webkit-transition : 1.8s;
}

</style>

function zom(value) {
var x = document.getElementById("boyut").value
           document.getElementById("mayResim").style.width = x*1 + "px"; 
  }

function boyutFunc() {
                     document.getElementById('boyut').value = "30"; zom();
                }
</script>

<b>Alttaki sürgüyü sağa veya sola iterek resimi zomlayın</b>
<br>
<input id="boyut"  type="range" min="10" max="1500" value="220" step="1" oninput = "zom(value)"  >
</div>
<br><br><br>
<img id="mayResim" src="http://elektrosin.com/resim/Diode-closeup.jpg">

Elektronik Devreler

Ziyaretçi Sayısı

ARAMA YAPIN

29 Mayıs 2016 Pazar

Slider Range ile resimi zom yapma html kodları