在Widget代码中没有jQuery的情况下使用光标图像向左滑动向右移动

Question

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

http://www.appsumo.com/clickminded-2016/

查看右上角的蓝色标签。我希望将其替换为我博客中的图片。

我想当鼠标悬停时从左上角到右滑块 this.pls 看演示。

抱歉我的英语不好:(

HTML

    <div id="css">
  <img src="https://pbs.twimg.com/profile_images/531885101043302400/4fDwYFQb.png" alt="" />
</div>

CSS

    img {
  position: relative;
  margin: -500px;
  left: 0;
  transition: left .5s;
}


#css:hover img {
  left: 400px;
}

DEMO

Answer 1

如果您只关心支持 html5 和 css3 的浏览器，请使用 css animations。当涉及 关键帧 .
时，语法有点像您现有的代码如果您想支持所有浏览器，请使用 jQuery 的 animate 函数，它每 100 毫秒左右更改一次样式，因此不需要 css3 支持。 css3 动画解决方案有更好的性能，但每个人都能负担得起运行 jQuery 的动画，你不会真正感受到任何差异。

Answer 2

希望能正确理解你的问题... 我为你做的:)

img {
  border: 1px solid black;
  width:50px;
  height:50px;
}

.parent{
top:100px;
padding:3px;
background-repeat:no-repeat; 
  cursor:pointer;
  border: 5px solid black;
}

.parent span{
position:absolute;
top:50px;
transition: left .5s;
left: 0;
margin-left:-100px;
width:50px;
height:50px;
}

.parent:hover span{
left:100px;
}

<a class="parent"> >
    <span>
       <img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/facebook.png" alt=""><br>
       <img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/twitter.png" alt="" />
    </span>    
</a>

希望不错！

Answer 3

如果您的代码上有 span 标记，它也会影响此标记...我建议您给这个特定的 span 一个 id，它可能会起作用。这是一个例子：

.parent #mySpan{
position:absolute;
top:150px;
transition: left .5s;
left: 0;
margin-left:-50px;
width:50px;
height:50px;
}

.parent:hover #mySpan{
left:50px;
}

<a class="parent"> 
    <span id='mySpan'>
       <img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/facebook.png" alt=""><br>
    </span>    
</a>

Answer 4

我发现这个 Javascript 代码没有 (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;" />

Answer 5

我发现这里的步骤很简单....只需将其复制到 HTML 小部件...完美无缺

<script type="text/javascript"> 
//<!-- 
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "-80"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 100);}); 
//--> 
</script> 
<style type="text/css">
.gplusbox{
background: url("https://lh3.googleusercontent.com/-iOMr0KnDFkY/V17Zm0bj49I/AAAAAAAABGw/Ag_ig7sBwYE5qXn6evvNTFSg9KvhQT7lACLcB/h250/Untitled-1.jpg") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 320px;
padding: 0 0px 0 40.5px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}

</style>
<div class="gplusbox"><div>
<a href="hhttps://pbs.twimg.com/profile_images/531885101043302400/4fDwYFQb.png"><img src="https://pbs.twimg.com/profile_images/531885101043302400/4fDwYFQb.png" /></a>

</div></div>

在Widget代码中没有jQuery的情况下使用光标图像向左滑动向右移动

Moving with cursor image left slide to right without jQuery in Widget code

html

javascript

css

widget

cursor