Question

我见过这个网站www.entireweb.com 我想知道如何让搜索框中的“Magnyfying Lens”像这样滚动。

如果您发现它有3张图片..

我知道如何进行2次翻转，但我将把第3次翻转...

由于

如果你的免费，请编码：p

Answer 1

有3个选择器可以考虑

<强>：悬停

<强>：活性

然后是链接/按钮的默认状态

你可以在这里看到它 http://www.jsfiddle.net/rpSgy/

刚刚用图片做了一个例子

http://www.jsfiddle.net/ZATzF/

Answer 2

第三个是在mousedown和mouseup上完成的

$('#maglensid').mousedown(function(){
    //swap to pressed image
}).mouseup(function(){
    //swap to normal image
}).hover(function() {
    //swap to hover image
}, function() {
    //swap to normal image
});

Answer 3

这是他们的CSS，他们只是移动一个关于使用css background属性的精灵图像。默认位置，悬停位置和活动（即点击）位置。

.web #front_logo, .web #search_form, .web #search {
   background-image: url("../skin_web_glare.png");
}

#search {
    background-position: -340px -70px;
    cursor: pointer;
    height: 44px;
    margin: 4px 0 0 7px;
    width: 43px;
}

#search:hover {
    background-position: -390px -70px;
}

#search:active, #search.active {
    background-position: -440px -70px;
}

所以我认为他们实际上并没有使用任何jquery / javascript只是css（应该如此：））。

如何在Textbox中制作Rollover图像？

3 个答案: