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实现文章图片弹出放大效果
Apr 06 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
Python中的装饰器用法详解
2015/01/14 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
初中地理教学反思
2014/01/11 职场文书
2014村务公开实施方案
2014/02/25 职场文书
活动总结书
2014/05/08 职场文书
企业标语口号
2014/06/10 职场文书
协议书范文
2015/01/27 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
导游词之日月潭
2019/11/05 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis