js的悬停效应及移动设备的问题

Question

我在投资组合页面中有一个joomla模板的问题。这个问题很容易描述:当你把鼠标传递到一张照片上时，个人电脑设备会出现一个黑暗窗口(悬停效应)，允许用户放大照片或输入照片细节(在出现的黑暗窗口中，在半透明效果中，有两个图标管理这两个选项)。当分辨率低于768 on时，悬停操作显然不起作用(它适用于移动设备)，如果我单击这张照片，它表示内容无法加载。当我点击带有移动设备的照片时，黑暗的窗口就会出现，并向我显示两个图标，它们让我放大照片或进入细节。该机制由作者为管理效果而创建的自定义js控制，但我不知道您帮助我的javascript..Can太多了吗？剧本是：

    var currentWindowWidth = $f(window).width();
     if(currentWindowWidth >= 768){
    $f('.viewport').mouseenter(function(e) {
        $f(this).children('a').children('img').animate({ height: '178',   left: '-20', top: '-20', width: '260'}, 100);
        $f(this).children('span').fadeIn(200);
        $f(this).children('span').addClass('dark-background');
    }).mouseleave(function(e) {
        $f(this).children('a').children('img').animate({ height: '138', left: '-0', top: '0', width: '220'}, 100);
        $f(this).children('span').fadeOut(200);
        $f(this).children('span').removeClass('dark-background');
    });
}

如果你能帮我我会很感激的。谢谢大家

Answer 1

注释掉或删除if

 // var currentWindowWidth = $f(window).width();
 // if(currentWindowWidth >= 768){
$f('.viewport').mouseenter(function(e) {
    $f(this).children('a').children('img').animate({ height: '178',   left: '-20', top: '-20', width: '260'}, 100);
    $f(this).children('span').fadeIn(200);
    $f(this).children('span').addClass('dark-background');
}).mouseleave(function(e) {
    $f(this).children('a').children('img').animate({ height: '138', left: '-0', top: '0', width: '220'}, 100);
    $f(this).children('span').fadeOut(200);
    $f(this).children('span').removeClass('dark-background');
});

// }

Answer 2

我会尝试使用touchend事件，这样当移动/触摸用户触摸到图像时，他们就会得到效果。

var currentWindowWidth = $f(window).width();
//if(currentWindowWidth >= 768){
    $f('.viewport').on("mouseenter touchend", function(e) {
        $f(this).children('a').children('img').animate({ height: '178',   left: '-20', top: '-20', width: '260'}, 100);
        $f(this).children('span').fadeIn(200);
        $f(this).children('span').addClass('dark-background');
    }).mouseleave(function(e) {
        $f(this).children('a').children('img').animate({ height: '138', left: '-0', top: '0', width: '220'}, 100);
        $f(this).children('span').fadeOut(200);
        $f(this).children('span').removeClass('dark-background');
    });
//}

这不会消除效果，因此，如果移动/触摸用户接触多个图像-每一个他们接触将得到黑暗的效果。

编辑: tomjm也提出了一个很好的观点。您需要删除if语句。