Question

嘿，每个人都有一个社交栏，我用CSS和HTML制作，我想知道而不是让它快速显示我将如何实现JavaScript所以我可以选择图像滑动的速度这是我的代码

CSS

 .sharing-cl {

     overflow:hidden;

     margin:0;

     padding:0;

     list-style:none;

 }

 .sharing-cl a {

     overflow:hidden;

     width:75px;

     height:30px;

     float:left;

     margin-right:5px;

     text-indent:-200px;

     background:url("http://theirondoor.x10.bz/V2/images/share-sprite.png") no-repeat;

 }

 a.sh-Youtube {

     background-position:-214px -40px;

 }

 a.sh-Twitter {

     background-position:-61px -40px;

 }

 a.sh-Rss {

     background-position:-143px -40px;

 }

 a.sh-Facebook {

     background-position:20px -40px;

 }

 a.sh-Youtube:hover {

     background-position:-214px 1px;

 }

 a.sh-Twitter:hover {

     background-position:-61px 1px;

 }

 a.sh-Rss:hover {

     background-position:-143px 1px;

 }

 a.sh-Facebook:hover {

     background-position:20px 1px;

 }

 #text {

     margin-top:3em;

     font-weight:bold;

     font-family:helvetica, arial, sans-serif;

 }

 #text a {

     text-indent:0;

     height:auto;

     text-align:center;

     font-size:11px;

     padding-top:35px;

     color:#999;

     text-decoration:none;

 }

HTML

<ul class="sharing-cl" id="text">
    <li></li>
    <li><a class="sh-Facebook" href="">Facebook</a>
    </li>
    <li><a class="sh-Twitter" href="">Twitter</a>
    </li>
    <li><a class="sh-Rss" href="">  Rss Feed</a>
    </li>
    <li></li>
    <li><a class="sh-Youtube" href="">Youtube</a>
    </li>
</ul>

这是jsFiddle - ＆gt; http://jsfiddle.net/Kf5CS/

Answer 1

 a.sh-Facebook {

     background-position:20px -40px;
-webkit-transition-property: background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease;

 }

因此，正如您所看到的，您应该使用“transition”属性来让图标移动，您可以在“duration”属性中设置所需的持续时间

我将如何实现JavaScript

1 个答案: