Question

我在投资组合页面中遇到joomla模板的问题。问题描述很简单：当你将鼠标放在照片（投资组合）上时，使用pcs设备会出现一个黑暗的窗口（悬停效果），允许用户放大照片或输入照片细节（在出现的黑暗窗口，在半透明效果中，有两个图标可以管理这两个选项）。在低于768px的分辨率下，悬停动作显然不起作用（它已经为移动设备完成），如果我点击照片，则表示内容无法加载。当我点击带有移动设备的照片时，会出现黑暗的窗口并向我显示两个图标，这些图标可以让我放大照片或输入细节。该机制由作者创建的自定义js控制以管理效果，但我不太了解javascript ..你能帮助我吗？脚本是：

    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

我会尝试使用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语句

Answer 2

注释掉或删除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');
});

//}

悬停对js的影响和移动设备的问题

2 个答案: