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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery插件之validation插件
Mar 29 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery实现简单日历效果
Jul 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
php win下Socket方式发邮件类
2009/08/21 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
试用php中oci8扩展
2015/06/18 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
JS与框架页的操作代码
2010/01/17 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
Angular4 ElementRef的应用
2018/02/26 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
Python3基础之函数用法
2014/08/13 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
python 读取、写入txt文件的示例
2020/09/27 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
幼儿园实习自我鉴定
2013/12/15 职场文书
怎么写自荐书范文
2014/02/12 职场文书
工作违纪检讨书
2014/02/17 职场文书
小学生暑假家长评语
2014/04/17 职场文书
医药销售自我评价200字
2014/09/11 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
新手初学Java网络编程
2021/07/07 Java/Android