我想要这个小部件代码。我检查了所有帖子,但它们没有帮助
此代码在 Widget 中无需 HTML 和 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;" />
最佳答案
您只需使用 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" />
关于javascript - 使用 Widget 代码中的 javascript 将光标图像左滑向右移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37292933/