![](/img/trans.png)
[英]Moving with cursor image left slide to right with javascript in Widget code
[英]Moving with cursor image left slide to right without jQuery in Widget code
我想要没有jQuery的小部件代码。 我检查了所有帖子,但没有帮助。 它就像SUmoME小部件。
http://www.appsumo.com/clickminded-2016/
请参阅右上方的蓝色标签。 我希望在我的博客中将该图片替换为pic。
当鼠标悬停在此位置时,我想从左角向右滑动,请参见演示。
对不起,我的英语不好 :(
的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;
}
如果您只关心支持html5和css3的浏览器,请使用css动画 。 在关键帧方面,该语法有点像您现有的代码。
如果要支持所有浏览器,请使用jQuery的animate
函数,该函数每100毫秒左右更改一次样式,因此不需要css3支持。 css3动画解决方案具有更好的性能,但是每个人都可以负担得起运行jQuery动画的费用,您不会真正感到任何不同。
我希望正确理解您的问题...我为您准备了:)
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>
希望它很好!
如果您的代码上有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>
我发现该Javasript代码没有在小部件中运行(HTML,CSS)..但是该鼠标悬停该怎么办呢? 演示
<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;" />
在这里,我发现了简单的步骤....只需将其复制到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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.