Question

我正在使用以下地址的网站

http://jsfiddle.net/deltanovember/h63Vx/3/

提交按钮的代码如下

<input class="ka-form-submit" type="submit" name="contact" value="Submit" />

我不明白的是如何实现翻滚效果。在“旧学校”发展中，这可以通过onMouseOver或类似的方式完成。但是我根本没有看到与任何JavaScript链接的按钮。我知道JavaScript是涉及的，因为当我删除脚本文件时，翻转停止工作。我找不到链接。

Answer 1

使用Firebug进行快速浏览后发现，当用户将鼠标悬停在按钮上时，按钮的不透明度会发生变化：

opacity: 1;

顺利改为：

opacity: .7;

查看karma.js文件，你会在“按钮悬停”部分看到这个：

TTjquery(document).ready(function(){
    TTjquery(".ka_button, #ka-submit, #searchform #searchsubmit, .ka-form-submit, #mc_signup #mc_signup_submit, .fade-me")
        .hover(
            function(){
                TTjquery(this)
                    .stop()
                    .animate({opacity:0.7},250)
            }, 
            function(){
                TTjquery(this)
                    .stop()
                    .animate({opacity:1.0},250)
            }
        );
});

Answer 2

我猜测.js文件正在捕获页面上的事件。当提交事件发生时，onclick或onmouseover或该表单名称或表单元素的任何内容，如JS文件中定义的那样，而不是元素本身，那么它就会触发一些操作。我会说实话;我没有阅读JS来验证这一点，但我对猜测感觉很好。

Answer 3

此页面包含一堆jQuery插件。点击“管理资源”以查看其中包含的内容。其中很多都是缩小的，所以分辨一下会有点痛苦。其中一个必须动态附加一个javascript鼠标悬停动画。动画可以平滑地降低鼠标悬停时的不透明度，从而产生鼠标悬停效果。

Answer 4

可以通过JavaScript将事件添加到dom元素中。 jQuery简化了这一点。

在纯JS中，常见的方法是：

domnode.onmouseover = somefunc;
function somefunc(e) {
   ...
}

- 和 -

if (domnode.addEventListener) {
  domnode.addEventListener('mouseover', somefunc, false);
} else {
  domnode.attachEvent('onmouseover', somefunc);
}

这很好，因为它以与MVC一致的方式将功能移出内容（HTML是模型，CSS是视图，JS是控制器）。

jQuery允许您简单地选择节点并附加事件：

，从而进一步简化了这一过程

$(selector).mouseover(somefunc);

此外，jQuery规范化事件绑定和事件对象，以便您可以获得一致的跨浏览器体验。

以下鼠标滚动如何工作？

4 个答案: