Rumah > Artikel > hujung hadapan web > Berdasarkan JavaScript, klik pada imej pada terminal mudah alih untuk melihat imej yang lebih besar Klik pada imej yang lebih besar untuk hide_javascript kemahiran

Berdasarkan JavaScript, klik pada imej pada terminal mudah alih untuk melihat imej yang lebih besar Klik pada imej yang lebih besar untuk hide_javascript kemahiran

WBOYasal: 2016-05-16 15:33:443405semak imbas

1. Permintaan

Klik pada imej untuk melihat imej yang lebih besar, dan kemudian klik pada imej yang lebih besar untuk menyembunyikannya. Ia kebanyakannya digunakan pada peranti mudah alih kerana skrin mudah alih adalah kecil dan anda mungkin perlu melihat imej yang besar.

2. Kod

<!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>

3. Kemahiran

Oleh kerana terminal mudah alih tidak boleh menambah tempat liputan, penyelesaian terakhir ialah menggunakan empat teg a untuk mencari sudut kiri atas, sudut kanan atas, sudut kiri bawah dan sudut kanan bawah.

<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;
}

PS: Imej mudah alih tapak web mudah alih melaksanakan pemuatan tertunda

Disebabkan oleh had keberkesanan kos rangkaian telekomunikasi domestik dan perbezaan dalam keupayaan pemprosesan telefon mudah alih, apabila mereka bentuk aplikasi tanpa wayar,

Menjimatkan trafik untuk pengguna adalah pertimbangan yang sangat penting. Boleh dikatakan setiap bait harus disimpan untuk pelanggan.

Menjimatkan trafik boleh memfokuskan pada aspek berikut:

1. Gunakan cache, seperti menggunakan storan setempat penyemak imbas, yang telah dibincangkan sebelum ini

2. Lengah memuatkan kod (pengesanan bawah, mendapatkan data melalui antara muka)

3. Pemuatan sumber tertunda, gambar muncul di kawasan yang boleh dilihat dan kemudian dimuatkan, (tanpa mengambil kira main balik automatik) audio dan video dimuatkan mengikut klik pengguna.

Hari ini saya akan bercakap secara ringkas tentang cara melaksanakan pemuatan tertunda imej.

Contoh berdasarkan jQuery dan jQuery mudah alih

Prinsip: Pengguna meluncurkan skrin dan penatalan skrin tamat (gunakan acara henti tatal tetingkap yang disediakan oleh jQuery dengan sewajarnya) untuk mengesan gambar yang muncul dalam port pandangan.

Hanya gantikan atribut src sebenar imej.

Petua: Jangan mengesan pemuatan serta-merta selepas menatal melihat kandungan. Rakan yang menggunakan WeChat boleh mengalami perkara ini dengan teliti.

Disebabkan kawalan jam, apabila pengguna kerap dan cepat membelek skrin, sejumlah besar permintaan tidak akan dikeluarkan.

Kod utama:

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');
    });
  }
};

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Atur lapan cara untuk mencipta objek dalam kemahiran JavaScript_javascriptArtikel seterusnya：Atur lapan cara untuk mencipta objek dalam kemahiran JavaScript_javascript

Artikel berkaitan

Lihat lagi