在窗口小部件代码中使用光标图像向左滑动而不使用jQuery

I want this widget code without jQuery. I checked all posts, but they do not help. its like SUmoME widget.

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

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

see the top right blue tab. i want that replace to pic in my blog.

请参见右上方的蓝色标签。我希望在我的博客中替换为pic。

I want from the left corner to right slider when mouse hover like this.pls see demo.

当鼠标像这样悬停时,我想从左角到右滑块。请参阅演示。

Sorry for my bad english :(

对不起,我的英语不好 :(

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

5 个解决方案

#1

If you only care for browsers supporting html5 and css3, use css animations. The syntax's a bit like your existing code when it comes to the key frames.
If you wanna support all browsers, use jQuery's animate funcion, which changes the styles every 100ms or so, thus doesn't require css3 support. The css3 animation solution has a better performance but everyone can afford to run jQuery's animation, you won't really feel any difference.

如果您只关心支持html5和css3的浏览器,请使用css动画。在关键帧方面,语法有点像现有代码。如果你想支持所有浏览器,请使用jQuery的animate funcion,它每100ms左右更改一次样式,因此不需要css3支持。 css3动画解决方案具有更好的性能,但每个人都可以负担得起运行jQuery的动画,你不会感觉到任何差异。

#2

i hope understand your question correctly... i made it for you :)

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

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>

hope its good!

希望它的好!

#3

if you have span tag on your code it will effect this tag too... i suggest you to give this specific span an id and probably it will work. here is an example:

如果你的代码上有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>

#4

I found this Javasript code without (HTML,CSS) working in widget.. but how to do like this mouse hover? DEMO

我发现这个Javasript代码没有(HTML,CSS)在widget中工作..但是如何做这样的鼠标悬停? 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;" />

#5

Here i found it easy steps .... just copy this to HTML widget ...works perfect

在这里我发现它很简单的步骤....只需将其复制到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>

#1

#2