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实现全选、全不选以及单选功能
Mar 23 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
html中两种获取标签内的值的方法
Jun 16 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比较两个绝对时间的大小
2014/01/31 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
python生成IP段的方法
2015/07/07 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
python re.match()用法相关示例
2021/01/27 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
生产厂长岗位职责
2014/02/21 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
双拥工作宣传标语
2014/06/26 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
党员证明模板
2015/06/19 职场文书
2015中学学校工作总结
2015/07/20 职场文书
领导离职感言
2015/08/03 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL