Basé sur JavaScript, cliquez sur l'image sur le terminal mobile pour afficher l'image plus grande. Cliquez sur l'image plus grande pour masquer les compétences Javascript.-js tutoriel-php.cn

Basé sur JavaScript, cliquez sur l'image sur le terminal mobile pour afficher l'image plus grande. Cliquez sur l'image plus grande pour masquer les compétences Javascript.

WBOY

Libérer： 2016-05-16 15:33:44

original

3402 Les gens l'ont consulté

1. Demande

Cliquez sur l'image pour l'agrandir, puis cliquez sur l'image plus grande pour la masquer. Il est principalement utilisé sur les appareils mobiles car l'écran du mobile est petit et vous devrez peut-être afficher de grandes images.

2.Code

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head runat="server">
<title>JQuery点击图片查看大图by starof</title>
<style type="text/css">
.exampleImg { height:100px; cursor:pointer;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//alert($);
// (function (window, undefined) {
// var MyJQuery = function () {
// window.MyjQuery = window.$ = jQuery; window.$ = MyJQuery;
// };
// })(window);
// alert($);
$.fn.ImgZoomIn = function () {
bgstr = '<div id="ImgZoomInBG" style=" background:#000000; filter:Alpha(Opacity=70); opacity:0.7; position:fixed; left:0; top:0; z-index:10000; width:100%; height:100%; display:none;"><iframe src="about:blank" frameborder="5px" scrolling="yes" style="width:100%; height:100%;"></iframe></div>';
//alert($(this).attr('src'));
imgstr = '<img id="ImgZoomInImage" src="' + $(this).attr('src')+'" onclick=$(\'#ImgZoomInImage\').hide();$(\'#ImgZoomInBG\').hide(); style="cursor:pointer; display:none; position:absolute; z-index:10001;" />';
if ($('#ImgZoomInBG').length < 1) {
$('body').append(bgstr);
}
if ($('#ImgZoomInImage').length < 1) {
$('body').append(imgstr);
}
else {
$('#ImgZoomInImage').attr('src', $(this).attr('src'));
}
//alert($(window).scrollLeft());
//alert( $(window).scrollTop());
$('#ImgZoomInImage').css('left', $(window).scrollLeft() + ($(window).width() - $('#ImgZoomInImage').width()) / 2);
$('#ImgZoomInImage').css('top', $(window).scrollTop() + ($(window).height() - $('#ImgZoomInImage').height()) / 2);
$('#ImgZoomInBG').show();
$('#ImgZoomInImage').show();
};
$(document).ready(function () {
$("#imgTest").bind("click", function () {
$(this).ImgZoomIn();
});
});
</script>
</head>
<body>
<div>
<!--第一种写法-->
<img class="exampleImg" src="images/03.jpg" id="imgTest"/>
<!--第二种写法-->
<img class="exampleImg" src="images/p1_nav2.png" onClick="$(this).ImgZoomIn();"/>
</div>
</body>
</html>

Copier après la connexion

3. Compétences

Étant donné que le terminal mobile ne peut pas ajouter de points d'accès, la solution finale consiste à utiliser quatre balises a pour localiser le coin supérieur gauche, le coin supérieur droit, le coin inférieur gauche et le coin inférieur droit.

<dl>
 <dd style="display:block;">
  <img src="images/four-duche.jpg" onClick="$(this).ImgZoomIn();">
  <a href="javascript:;" src="images/11.jpg" class="topleft" onClick="$(this).ImgZoomIn();"></a>
  <a href="javascript:;" src="images/12.jpg" class="topright" onClick="$(this).ImgZoomIn();"></a>
  <a href="javascript:;" src="images/13.jpg" class="bottomleft" onClick="$(this).ImgZoomIn();"></a>
  <a href="javascript:;" src="images/14.jpg" class="bottomright" onClick="$(this).ImgZoomIn();"></a>
 </dd>
 ...
</dl>
css
.topleft,.topright,.bottomleft,.bottomright{
 width:50%;
 height:50%;
 position:absolute;
}
.topleft{
 /*background-color:red;*/
 top:0;
 left:0;
}
.topright{
 /*background-color:green;*/
 top:0;
 right:0;
}
.bottomleft{
 /*background-color:blue;*/
 bottom:0;
 left:0;
}
.bottomright{
 /*background-color:yellow;*/
 bottom:0;
 right:0;
}

Copier après la connexion

PS : Les images mobiles des sites Web mobiles implémentent un chargement différé

En raison des limites de rentabilité des réseaux de télécommunications nationaux et des différences dans les capacités de traitement des téléphones mobiles, lors de la conception d'une application sans fil,

Économiser du trafic pour les utilisateurs est une considération très importante. On peut soutenir que chaque octet doit être enregistré pour le client.

Les économies de trafic peuvent se concentrer sur les aspects suivants :

1. Utilisez le cache, par exemple en utilisant le stockage local du navigateur, ce qui a déjà été discuté

2. Retarder le chargement du code (détection du fond, obtention des données via l'interface)

3. Chargement retardé des ressources, les images apparaissent dans la zone visible puis chargées, (sans tenir compte de la lecture automatique) l'audio et la vidéo sont chargés en fonction des clics de l'utilisateur.

Aujourd'hui, je vais parler brièvement de la façon d'implémenter le chargement différé des images.

Exemples basés sur jQuery et jQuery mobile

Principe : l'utilisateur fait glisser l'écran et le défilement de l'écran se termine (utilisez l'événement window scrollstop fourni par jQuery de manière appropriée) pour détecter l'image qui apparaît dans la fenêtre.

Remplacez simplement le véritable attribut src de l'image.

Astuce : Ne détectez pas le chargement immédiatement après le défilement. Définissez un délai d'une seconde. Peut-être que l'utilisateur lancera immédiatement le prochain défilement. En fonction de l'environnement réseau actuel, un délai d'une seconde peut indiquer que l'utilisateur souhaite vraiment le faire. voir le contenu. Les amis qui utilisent WeChat peuvent en faire l'expérience avec attention.

En raison du contrôle de l'horloge, lorsque l'utilisateur retourne fréquemment et rapidement l'écran, un grand nombre de demandes ne seront pas émises.

Code principal :

var refreshTimer = null,
 mebook = mebook || {};
/*
*滚动结束 屏幕静止一秒后检测哪些图片出现在viewport中
*和PC端不同 由于无线速度限制 和手机运算能力的差异 1秒钟的延迟对手机端的用户来说可以忍受
*/
$(window).on('scrollstop', function () {
 if (refreshTimer) {
 clearTimeout(refreshTimer);
 refreshTimer = null;
 }
 refreshTimer = setTimeout(refreshAll, 1e3);
});
$.belowthefold = function (element) {
  var fold = $(window).height() + $(window).scrollTop();
  return fold <= $(element).offset().top;
};
$.abovethetop = function (element) {
  var top = $(window).scrollTop();
  return top >= $(element).offset().top + $(element).height();
};
/*
*判断元素是否出现在viewport中 依赖于上两个扩展方法 
*/
$.inViewport = function (element) {
  return !$.belowthefold(element) && !$.abovethetop(element)
};
mebook.getInViewportList = function () {
  var list = $('#bookList li'),
    ret = [];
  list.each(function (i) {
    var li = list.eq(i);
    if ($.inViewport(li)) {
      mebook.loadImg(li);
    }
  });
};
mebook.loadImg = function (li) {
  if (li.find('img[_src]').length) {
    var img = li.find('img[_src]'),
      src = img.attr('_src');
    img.attr('src', src).load(function () {
      img.removeAttr('_src');
    });
  }
};

Copier après la connexion