recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Comment implémenter l'image frontale dans l'article. Cliquez pour afficher une fenêtre contextuelle pour l'agrandir, puis cliquez pour la rétracter.

Dans un projet récent, il y a eu un article publié par un membre. Lorsque les illustrations de l'article sont affichées sur le téléphone mobile, il faut parfois zoomer pour les visualiser, et on ne peut pas cliquer pour agrandir.

La seule chose qui peut être utilisée ici est la balise img.

$("img").click(function(){

$(this).wrap('<a href='+$(this)[0].src+'></a>')

})

Ajoutez une balise href à img et écrivez le chemin d'img, l'image apparaîtra, mais il n'y a aucun moyen de revenir, veuillez le résoudre

Semblable à l'image présentée, comment implémenter ce front-end ou ce plug-in !

过去多啦不再A梦过去多啦不再A梦2761 Il y a quelques jours1027

répondre à tous(5)je répondrai

  • 三叔

    三叔2017-06-26 10:53:46

    Cliquez sur l'image pour créer un nouveau calque de masque. Le src de l'image dans le calque de masque est égal au src de la cible sur laquelle vous avez cliqué

    .

    répondre
    0
  • 漂亮男人

    漂亮男人2017-06-26 10:53:46

    Vous pouvez jeter un œil aux plug-ins de jquery pour les effets d'image. Introduisez-le directement dans votre projet, puis effectuez quelques configurations, et il sera implémenté.
    J'aime cet effet : http://www.jq22.com/yanshi6536

    répondre
    0
  • 阿神

    阿神2017-06-26 10:53:46

    Si vous voulez y parvenir vous-même

    Je pense que ce que tu veux dire, c'est qu'après avoir cliqué sur l'image, l'image est enveloppée d'une couche de tag

    Vous pouvez changer votre façon de penser

    Utilisez location.href pour sauter après avoir cliqué. Cela permet de déterminer plus facilement s'il faut sauter ou revenir en js

    .

    La grande image qui apparaît a un fond noir, ce qui est plus facile à comprendre pour les utilisateurs. En fait, les utilisateurs peuvent cliquer sur le fond noir pour revenir

    .

    La relation hiérarchique entre l'arrière-plan et l'image a été établie. Utilisez event.target pour déterminer si l'image cliquée est une image ou un arrière-plan noir

    .

    Décidez de sauter ou de revenir

    répondre
    0
  • 欧阳克

    欧阳克2017-06-26 10:53:46

    Vous parlez de ce genre de plug-in http://refined-x.com/Flow-UI/...

    répondre
    0
  • 滿天的星座

    滿天的星座2017-06-26 10:53:46

    Je n'ai pas écrit sur la version mobile, mais j'ai écrit sur des effets similaires sur la version PC.
    La méthode consiste à ajouter un calque de masque, qui est généralement masqué. Lorsque l'on clique sur l'image, le calque de masque bascule (), puis attribue l'attribut src de l'image à l'img du calque de masque.
    Bien sûr, vous devez définir le style du calque de masque img, tel que : largeur maximale, hauteur maximale, centré, etc.
    Enfin, le niveau de la couche de masque doit être le plus élevé.

    répondre
    0
  • Annulerrépondre