隨着光標圖像左移幻燈片向右滑動與小部件代碼中的JavaScript

我想要這個小部件代碼。我檢查了所有帖子，但他們沒有幫助隨着光標圖像左移幻燈片向右滑動與小部件代碼中的JavaScript

此代碼無HTML工作&在Widget中的CSS。但我想用鼠標懸停像這樣DEMO與下面的代碼。我的英文不好

<script type="text/javascript"> 
<!-- 
var imgObj = null; 
var animate ; 
function init(){ 
    imgObj = document.getElementById('myImage'); 
    imgObj.style.position= 'absolute'; 
    imgObj.style.top = '240px'; 
    imgObj.style.left = '-300px'; 
    imgObj.style.visibility='hidden'; 
    moveRight(); 
} 
function moveRight(){ 
    if (parseInt(imgObj.style.left)<=10) 
    { 
     imgObj.style.left = parseInt(imgObj.style.left) + 5 + 'px'; 
     imgObj.style.visibility='visible'; 
     animate = setTimeout(moveRight,20); // call moveRight in 20msec 
     //stopanimate = setTimeout(moveRight,20); 
    } 
    else 
     stop(); 
     f(); 
} 

function stop(){ 
    clearTimeout(animate); 
} 
window.onload =init; 
//--> 
</script> 
<img id="myImage" src="https://lh4.googleusercontent.com/proxy/LxuD_Ceq6NrRGBW2mF_6Cy9zeO_vqkV8ZTRMdzjc_LxE0InnXBLp1_BkWuyhlg0EMJPt-Njzzp5_4cuR562m6dh8QNTW_1kzsf9pXcXiKI2ZK6wEMJH2TAAiQqpQUewNMKI=s0-d" style="margin-left:170px;" />

來源

2016-05-18 Remo Stalin

你可以用CSS3 transition來做到這一點。檢查下面的更新。

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
img { 
 
    cursor: pointer; 
 
    position: relative; 
 
    margin: -65px; /* Adjust this value to expose the image */ 
 
    left: 0; 
 
    transition: left .5s; 
 
} 
 
img:hover { 
 
    left: 65px; /* Use same value as used as negative margin */ 
 
}

<img id="myImage" src="https://lh4.googleusercontent.com/proxy/LxuD_Ceq6NrRGBW2mF_6Cy9zeO_vqkV8ZTRMdzjc_LxE0InnXBLp1_BkWuyhlg0EMJPt-Njzzp5_4cuR562m6dh8QNTW_1kzsf9pXcXiKI2ZK6wEMJH2TAAiQqpQUewNMKI=s0-d" />

來源

2016-05-18 07:42:13 Pugazh

我不喜歡在主頁看到！我想在每個帖子中展示這個！ –

我剛剛嘗試了這段代碼..我的模板變得更加左和錯誤 –

隨着光標圖像左移幻燈片向右滑動與小部件代碼中的JavaScript

回答

相關問題