html图片点击局部放大,jQuery教程 css+jQuery实现图片局部放大预览

本篇教程介绍了jQuery教程 css+jQuery实现图片局部放大预览，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

<

今天有时间开始动手,使用css+jqueryshi实现了图片局部放大的组件,首先看看效果图:

界面设计思路如下:

1.两个div,左边放图片的缩略图   2.在左边缩略图鼠标移动的时候,区域(效果图中的网格)   3.右边放大图div,背景为缩略图的大图,在鼠标移入缩略图中,通过获取鼠标的坐标,将右侧背景图片移动到跟鼠标坐标对应的位置   4.设计时尽量,获取原大图的尺寸,和缩略图视窗计算比例,更大精度的做到左侧缩略图上表示的区域,和右侧放大部分匹配

本示例大部分编码在javascript脚本,以下列出各部分的源码:

       

            

       

css:

.all-region {

width: 100%;

height: auto;

}

.all-region .image-wrap {

width: 1300px;

margin: 0px auto;

height: 300px;

line-height: 300px;

overflow: hidden;

vertical-align: center;

background: #FBFBFB;

border-left: 1px solid #ebebeb;

position: relative;

}

.image-wrap .little-img img {

width: 600px;

height: 300px;

}

.image-wrap .large-img {

width: 600px;

height: 300px;

background-image: url("./images/show-window/timg.jpg");

border: 1px solid transparent;

background-size: inherit;

background-repeat: no-repeat;

background-position-x: 0px;

background-position-y: 0px;

position: relative;

top: -301px;

left: 605px;

float: left;

z-index: 10;

opacity: 0;