html移动端展示选中图片大小,jquery实现移动端点击图片查看大图特效

本文的需求很简单：点击图片查看大图，再点大图隐藏。多用于移动端，因为移动端屏幕小，可能需要查看大图。

具体实现代码

JQuery点击图片查看大图by starof

.exampleImg { height:100px; cursor:pointer;}

//alert($);

// (function (window, undefined) {

// var MyJQuery = function () {

// window.MyjQuery = window.$ = jQuery; window.$ = MyJQuery;

// };

// })(window);

// alert($);

$.fn.ImgZoomIn = function () {

bgstr = '

//alert($(this).attr('src'));

imgstr = '';

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();

});

});

jquery实现移动端点击图片查看大图特效需要用到的技巧

需要点击图片中1、2、3、4四张小图分别查看大图，而下面左右按钮切换时是需要同时切换4张小图。

因为移动端无法添加热点，最终一个解决方法是使用四个a标签定位到左上角，右上角，左下角，右下角四个区域。

　　

...

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;

}

以上就是移动端点击图片查看大图的实现过程，希望对大家的学习有所帮助。