jquery实现图片放大点击切换


Posted in jQuery onJune 06, 2017

本文实例为大家分享了jquery放大点击切换图片展示的具体代码,供大家参考,具体内容如下

html代码

<body>
<div class="boss">
 <div class="bigimg">
  <img src="img/s1.jpg" height="350" width="350" id="spic"> 
  <div id="mask"></div>
 </div>
 <div class="xia"> <a class="prev"><</a> <a class="next">></a>
  <div 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>
  </div>
 </div>
 <div class="zoom">
  <img src="img/b1.jpg" id="bpic">
 </div>
</div>

<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代码

var $spic=$("#spic");
var $mask=$("#mask");
var $bigimg=$(".bigimg");
var $bpic=$("#bpic");
$(".items img").on("mouseover",function(){
 
 $spic.attr("src",$(this).attr("src"));//鼠标滑过切换
 $bpic.attr("src",$(this).attr("src"));

});

var l=$bigimg.eq(0).offset().left;
var t=$bigimg.eq(0).offset().top;
var width1=$mask.outerWidth()/2;
var height1=$mask.outerHeight()/2;

var maxl=$bigimg.width()-$mask.outerWidth();
var maxt=$bigimg.height()-$mask.outerHeight();

var bili=$bpic.width()/$spic.width();

$bigimg.mouseover(function(e){
 var maskl=e.clientX-l-width1,maskt=e.clientY-t-height1;
 if(maskl<0) maskl=0;
 if(maskt<0) maskt=0;
 if(maskl>maxl)maskl=maxl;
 if(maskt>maxt)maskt=maxt;

 $mask.css({"left":maskl,"top":maskt});

 $(".zoom").show();

 $bpic.css({"margin-left":-maskl*bili,"margin-top":-maskt*bili});
});


var marginLeft=0
$(".next").click(function(){

 marginLeft=marginLeft-63.5;
 if(marginLeft<-254) marginLeft=-254;

 $(".items ul").css({"margin-left":marginLeft})
})
$(".prev").click(function(){

 marginLeft=marginLeft+63;
 if(marginLeft>0) marginLeft=0;

 $(".items ul").css({"margin-left":marginLeft})
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 #jQuery
Jquery EasyUI $.Parser
Jun 02 #jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 #jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 #jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 #jQuery
jquery网页加载进度条的实现
Jun 01 #jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 #jQuery
You might like
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php构造函数实例讲解
2013/11/13 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
python实现在windows下操作word的方法
2015/04/28 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
python 字典套字典或列表的示例
2019/12/16 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
毕业生写求职信的要点
2014/03/04 职场文书
战友聚会主持词
2014/04/02 职场文书
遗产继承公证书
2014/04/09 职场文书
公司请假条格式
2014/04/11 职场文书
个人党性锻炼总结
2015/03/05 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书