在Widget代码中没有jQuery的情况下,用光标图像从左滑动到右
Moving with cursor image left slide to right without jQuery in Widget code
我想要这个没有jQuery的小部件代码。我检查了所有的帖子,但它们没有帮助。它类似于SUmoME小部件。
http://www.appsumo.com/clickminded-2016/
请看右上角的蓝色标签。我想把它替换成我博客中的图片。
当鼠标悬停时,我想从左角向右滑动。
抱歉我英语不好:(
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
如果您只关心支持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>
我在小部件中发现了这个没有(HTML,CSS)的Javasrpt代码。。但是如何像鼠标悬停一样呢演示
<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>
相关文章:
- 在Widget代码中使用javascript从左向右滑动光标图像
- 在Widget代码中没有jQuery的情况下,用光标图像从左滑动到右
- 图像阵列预加载时显示沙漏光标
- 使用JavaScript的带有背景图像的径向光标
- 如何使用JS捕捉带有垂直线的自定义图像光标
- Javascript用光标擦除图像
- 可以用我自己的自定义图像替换光标
- 使用Opera自定义base64图像光标-可能
- 如果光标在图像上在某种意义上不停止.它正在运行
- 使用Javascript和HTML避开光标的图像
- JavaScript 如何将鼠标光标更改为图像
- 如何将箭头光标图像更改为我的网页的手形图像
- 如何在 js 和 css3 中使用鼠标光标单击实现滚动图像
- 从 cs 页面更改图像按钮集的光标
- 使用javascript自定义光标图像
- 使用jQuery将光标更改为自定义图像
- 在图像悬停时显示文本而不是光标
- 使用Javascript的随机光标图像
- 在没有画布的javascript中使用自定义光标图像动态更改光标大小
- Javascript-使图像出现在光标处