JavaScript Based mobile terminal click the picture to view the big image click the big image hide
- 2020-09-28 08:42:59
- OfStack
1. The demand
Click on the image to see the larger image, and then click on the larger image to hide. It is mainly used for mobile terminal, because mobile terminal screen is small, may need to view a large picture.
Code 2.
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head runat="server">
<title>JQuery Click on the image to see a larger image 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>
<!-- The first 1 Kind of writing -->
<img class="exampleImg" src="images/03.jpg" id="imgTest"/>
<!-- The first 2 Kind of writing -->
<img class="exampleImg" src="images/p1_nav2.png" onClick="$(this).ImgZoomIn();"/>
</div>
</body>
</html>
3. The skills
Because the mobile terminal cannot add hot spots, the final solution is to use four a tags to locate the four areas in the upper left corner, upper right corner, lower left corner and lower right corner.
<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: Lazy loading of mobile images for mobile websites
Due to the cost performance limitation of domestic telecom network and the difference of mobile phone processing capacity, when designing a wireless application,
Saving traffic for users is a very important consideration. You could say that every byte should save the client.
Saving traffic can be concerned from the following aspects:
1. Using caching, such as using browser local storage, has been discussed previously
2. Lazy loading code (touchdown detection, data acquisition through interface)
3. Lazy loading of resources. Images appear in the visual area and then are loaded.
Today, I will talk about the implementation of image lazy loading.
Examples are based on jQuery and jQuery mobile
How it works: The user swipes the screen and the screen scrolls to an end (using the window scrollstop event provided by jQuery is appropriate) to detect images that appear in viewport.
Replace the real src attribute of the image.
Tip: Don't check the load immediately after the scrolling is over. Set a 1 second delay, and maybe the user will start the next scroll immediately. Based on the current network environment, a 1 second delay indicates that the user really wants to see this content. Friends with WeChat can experience the 1 in detail.
Due to the clock control, when the user frequently and quickly flip the screen, no large number of requests.
Main code:
var refreshTimer = null,
mebook = mebook || {};
/*
* End of the scroll Stationary screen 1 Detect which images appear after seconds viewport In the
* and PC The different Because of the wireless speed limit And the computing power of mobile phones 1 The second delay is tolerable for mobile users
*/
$(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();
};
/*
* Determines whether the element appears in viewport In the Depends on the last two extension methods
*/
$.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');
});
}
};