使用 Widget 代码中的 javascript 将光标图像从左滑到右移动答案

【问题标题】：Moving with cursor image left slide to right with javascript in Widget code使用 Widget 代码中的 javascript 将光标图像从左滑到右移动
【发布时间】：2016-05-18 07:29:52
【问题描述】：

我想要这个小部件代码。我检查了所有帖子，但它们没有帮助

此代码在 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;" />

【问题讨论】：

标签： javascript html css hover widget

【解决方案1】：

您只需使用 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 */
}

&lt;img id="myImage" src="https://lh4.googleusercontent.com/proxy/LxuD_Ceq6NrRGBW2mF_6Cy9zeO_vqkV8ZTRMdzjc_LxE0InnXBLp1_BkWuyhlg0EMJPt-Njzzp5_4cuR562m6dh8QNTW_1kzsf9pXcXiKI2ZK6wEMJH2TAAiQqpQUewNMKI=s0-d" /&gt;

【讨论】：

我不喜欢在主页看到！！我想在每个帖子中显示这个！！
我刚刚尝试了这段代码.. 我的模板向左转更多&错误