当前位置：Gxlcms > JavaScript > jquery实现图片放大点击切换功能实例分享

jquery实现图片放大点击切换功能实例分享

时间：2021-07-01 10:21:17 帮助过：15人阅读

本文主要为大家详细介绍了jquery实现图片放大点击切换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

html代码

<body>
<p class="boss">
 <p class="bigimg">
  <img src="img/s1.jpg" height="350" width="350" id="spic"> 
  <p id="mask"></p>
 </p>
 <p class="xia"> <a class="prev"><</a> <a class="next">></a>
  <p class="items">
  <ul>
   <li><img src="img/b1.jpg" height="56" width="56"></li>
   <li><img src="img/b2.jpg" height="56" width="56"></li>
   <li><img src="img/b3.jpg" height="56" width="56"></li>
   <li><img src="img/b1.jpg" height="56" width="56"></li>
   <li><img src="img/b3.jpg" height="56" width="56"></li>
   <li><img src="img/b1.jpg" height="56" width="56"></li>
   <li><img src="img/b1.jpg" height="56" width="56"></li>
   <li><img src="img/b1.jpg" height="56" width="56"></li>
   <li><img src="img/b2.jpg" height="56" width="56"></li>
   <li><img src="img/b3.jpg" height="56" width="56"></li>
  </ul>
  </p>
 </p>
 <p class="zoom">
  <img src="img/b1.jpg" id="bpic">
 </p>
</p>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/js6.js"></script>

css代码

*{
margin: 0;
padding:0;
}
li{
 list-style: none;
}
.boss{
 position:relative;
 width: 350px;
}
.bigimg{
 width: 350px;
 border: 1px solid #ccc;
 height: 350px;
 position: relative;
}
#mask{
 width: 150px;
 height: 150px;
 background: rgba(255,255,255,0.5);
 position: absolute;
 top: 0;
 left: 0;
 border:1px solid #ccc;
 cursor: pointer;
}

.xia{
 clear:both;
 margin-top:5px;
 width:352px;
}
.xia .prev{
 float:left;
 margin-right:4px;
}
.xia .next{
 float:right;
}
.xia .prev,.xia .next{
 display:block;
 text-align:center;
 width:10px;
 height:54px; 
 line-height:54px;
 border:1px solid #CCC;
 background:#EBEBEB;
 cursor:pointer;
 text-decoration:none;
}
.xia .items{
 float:left;
 position:relative;
 width:322px;
 height:56px;
 overflow:hidden;
}
.xia .items ul{
 position:absolute;
 height:56px;
}
.xia .items ul li{
 float:left;
 width:64px;
 text-align:center;
}
 .xia .items ul li img{
 border:1px solid #CCC;
 padding:2px;
 width:50px;
 height:50px;
}
.xia .items ul li img:hover{
 border:2px solid #FF6600;
 padding:1px;
} 
.zoom{
 width: 350px;
 height: 410px;
 border:1px solid #ccc;
 position: absolute;
 top: 0;
 right: -360px;
 overflow: hidden;
 display: none;
}

jquery代码

jquery实现图片放大点击切换功能实例分享

人气教程排行