jquery实现移动端点击图片查看大图特效

网络编程 2024/11/20 佚名

3 2 1

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

具体实现代码

<!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="/UploadFiles/2021-04-02/jquery-latest.js">


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

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



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


<dl>
　　<dd style="display:block;">
 　　<img src="/UploadFiles/2021-04-02/four-duche.jpg">

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



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