html点击图片局部放大,js实现图片局部放大效果

图片局部放大效果结合的知识点主要是DOM的操作，以及事件的应用，所以首先要对DOM的操作有一定了解，其次能对事件的应用有一定的累积。

如上图，可以看到，这是放大镜的基本效果，主要分成左右两个部分。左边分成一张大图，和一个导航栏，在右边则是一个放大镜放大后的图片。因此，我在画页面的时候，大体的HTMl结构如下：

在这个时候，将静态页面按常规方式进行布局，给予css样式如下：

*{

padding:;

margin:;

list-style: none;

}

.choose{

width: 400px;

height: 600px;

float: left;

margin:50px 0 0 50px;

}

.content{

width: 400px;

height: 400px;

position: relative;

}

.content img {

width: 400px;

height: 400px;

}

#listshow{

width: 400px;

height: 100px;

margin-top: 20px;

}

#listshow li{

width: 98px;

height: 100px;

float: left;

border:1px solid #666;

}

#listshow li img{

width: 98px;

height: 100px;

}

#listshow .selected{

border-color: brown;

}

.larger{

width: 400px;

height: 400px;

position: absolute;

top: 50px;

left: 500px;

float: left;

overflow: hidden;

display: none;

}

#big{

width: 800px;

height: 800px;

position: absolute;

left:;

top:;

}

.shadow{

width: 200px;

height: 200px;

background-color: rgba(145,200,200,.4);

position: absolute;

left:;

top:;

z-index:;

display: none;

}

那么这个时候，开始写js样式，分布书写的话，第一步要考虑到左边的选项卡。选项卡我采用直接使用src赋值的方法，将滑过的图片对应的src给大图，代码呈现：

for(var i = 0;i

var showitem = showli[i];

showitem.onmouseover =showitem.onclick = function(e){

let evt = window.event||e;

for(var j =0;j

showli[j].className = "";

}

var showimg = this.getElementsByTagName("img")[0];

var imgsrc = showimg.src;

small.src = imgsrc;

var bigsrc = showimg.getAttribute("data-img");

big.src = bigsrc;

this.className = "selected";

}

}

这样就可以成功实现选项卡功能，比较简单粗暴的一种方式，当然，大家使用selected结合点击下标和大图下标相等的这一点，也一样可以做出来。

接下来要考虑到，鼠标在大图上移动时，遮罩层的移动效果。值得一提的时候，这个地方其实存在一个视觉上的误区，看起来是在滑动遮罩层，其实是鼠标的滑动，而遮罩层通过获取鼠标的clientX，clientY来确定自己的位置，遮罩层位置获取代码：

content.onmousemove = function (e) {

var evt = window.event||e;

larger.style.display = "block";

shadow.style.display = "block";

var clientX = evt.clientX;

var clientY = evt.clientY;

var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

var X = clientX+scrollLeft-chooseMarginL-shadowW/2;

var Y = clientY+scrollTop-chooseMarginT-shadowH/2;

if(X<=0){

X = 0;

}

if(X>=maxX){

X = maxX;

}

if(Y<=0){

Y = 0;

}

if(Y>=maxY){

Y = maxY;

}

// 防止遮罩层粘滞，跟随鼠标一起滑出大图位置

var bigX = X*bigW/contentW;

var bigY = Y*bigH/contentH;

// bigX / bigW = X / contentW,主图和遮罩层之间存在两倍关系，放大图和原图之间也有两倍关系

shadow.style.left = X+"px";

shadow.style.top = Y+"px";

big.style.left = -bigX+"px";

big.style.top = -bigY+"px";

}

在这里，计算较多，尤其要注意遮罩层阴影，主图以及放大图之间的倍数关系。

到这里，基本功能就实现了，这里面涉及的计算可以适当配图理解，尤其注意点击位置的获取。

JS实现图片&&num;39&semi;&&num;39&semi;推拉门&&num;39&semi;&&num;39&semi;效果

JS实现图片''推拉门''效果   ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通 ...

3月题外：关于JS实现图片缩略图效果的一些小问题

由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

JS中图片飞飞效果

当鼠标在界面上移动的时候,后面有一连串的图片跟随者一起飘动,效果如下: 实现的基本思想:准备五个img标签,为了方便控制都放在一个div里面,设置div的定位方式为 fixed,设置成这中定位方式主要 ...

3月题外：关于JS实现图片缩略图效果的一个小问题

由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

js实现图片幻灯片效果

其效果是点击图片切换到下一张图片 首先准备五张图片

• 

  js简单 图片版时钟，带翻转效果

  js简单 图片版时钟,带翻转效果

  js鼠标滚轮滚动图片切换效果

  效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: /p>

  &lbrack;读码&rsqb;&lbrack;js&comma;css3&rsqb;能感知鼠标方向的图片遮罩效果

  效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  随机推荐

  android项目中gen目录不能自动生成R&period;java的原因

  1.调用的资源文件不存在:xml文件中有些控件没有关联引用:把项目缺少的文件加上,包括资源文件,如 values中的strings.xml或者图片等资源. 2.项目中缺少必须的系统文件(比如:defa ...

  ELK Packetbeat 部署指南&lpar;15th&rpar;

  原文链接:http://www.ttlsa.com/elk/elk-packetbeat-deployment-guide/ Packetbeat 是一个实时网络数据包分析工具,与elasticsea ...

  SQL每个用户最后的一条记录

  SELECT [ID] ,[UserID] ,[StartDate] ,[EndDate] ,[CreateUser] ,[CreateDate] ,[LastEditUser] ,[LastEdit ...

  web开发性能优化---用户体验篇

  怎样从技术角度怎样增强用户体验.都是非常多平台都在做的事情,依据个人实际经验碰到几种体验做下总结. 1.降低页面刷新白屏 适当使用ajax技术.改善刷新白屏现象. 2.信息提醒,邮件.站内信.短信在购 ...

  利用alias在Linux下设置命令别名

  alias          //自定义命令="Linux命令"   alias          //查看当前系统里所有的自定义命令 unalias         //自定义命 ...

  ajax文件上传-FormData&lpar;&rpar;

  HTML:

  Shell中while循环的done 后接一个重定向&lt&semi;

  读文件的方法: 第一步: 将文件的内容通过管道(|)或重定向(

  java把类似a&equals;1&amp&semi;b&equals;2&amp&semi;c&equals;3的String类型数据转成map集合

  public static Map transStringToMap(String mapString, String separator, String ...

  元组&comma;列表的增删改查&comma; for&comma;range 循环

  1. list(增删改查) 列表可以装大量的数据. 不限制数据类型. 表示方式:[] 方括号中的每一项用逗号隔开 列表和字符串一样.也有索引和切片 常用的功能: 1. 增: append() 2. 删 ...

  Ubuntu中更改所有子文件和子目录所有者权限

  转自:http://www.linuxidc.com/Linux/2015-03/114695.htm Ubuntu中有两个修改命令可以用到,「change mode」&「change own ...