放大镜图片
来源:学生作业帮助网 编辑:作业帮 时间:2024/09/24 13:25:20 高中作文
篇一:js实现图片放大镜效果
$().ready(function(){
$("#xiaotu").mousemove(function(e){
var smallW=$("#xiaotu>#tu>img").attr("width");//小图片的宽度
var bigimage=new Image();
bigimage.src=$("#xiaotu>#tu>img").attr("src");
var bigimageW=bigimage.width;//大图片实际宽度
var bigimageT=bigimage.height;//大图片实际高度
var bili=bigimageW/smallW;//比例
var smallH=Math.ceil(bigimage.height/bili);//小图片的高度
var whiteW=Math.ceil(400/bili);//小白的宽度,等于高度
//alert(whiteW);
var mouseL=e.pageX;//鼠标的x坐标
var mouseT=e.pageY;//鼠标的ny坐标
var smallimageT=$("#tutu").offset().top;//小图片距离顶端的距离
var smallimageL=$("#tutu").offset().left;//小图片距离左端的距离
var aa=whiteW/2;
var whiteL=Math.ceil(mouseL-smallimageL-whiteW/2);//小白图片距离小图片左边的位置 var whiteT=Math.ceil(mouseT-smallimageT-whiteW/2);//小白图片距离小图片顶边的位置
//alert(bigimageT);
//alert(whiteL);
if(whiteT<0){
} whiteT=0; if(whiteT>smallH-whiteW){ whiteT=smallH-whiteW; } if(whiteL<0){ whiteL=0; } if(whiteL>500-whiteW){
whiteL=500-whiteW;
}
var bigimageT=Math.ceil(whiteT*bili);
var bigimageL=Math.ceil(whiteL*bili);
//alert(bigimageT);
$("#datu").show();
$("#baikuang").show();
$("#baikuang").css("left",whiteL);
$("#baikuang").css("top",whiteT);
$("#baikuang").css("width",whiteW);
$("#baikuang").css("height",whiteW);
$("#datu>img").css("margin-left",-bigimageL) $("#datu>img").css("margin-top",-bigimageT)
})
})
$().ready(function(){
$("#xiaotu").bind("mouseleave",function(){
$("#datu").hide();
$("#baikuang").hide();
})
})
body{margin:0; padding:0;
}
#datu{
} width:400px; height:400px; border:1px #009900 solid; overflow:hidden; position:absolute; display:none; left:500px; top:0px;
#baikuang{
border:0;
}
#xiaotu{ padding:0px;
margin:0 auto; position:relative; margin-left:100px; position:absolute; opacity:0.6; background:#0650D5;
margin-top:100px;
}
#tu{margin:0px;
padding:0px;}
width="500"/>
篇二:jQuery实现图片放大镜效果
1.1.1 摘要
相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果。
在接下来的博文中,我们将向大家介绍通过jQuery实现放大镜效果。
目录
?
?
?
?
? 实现原理 mousemove事件 相对坐标 background-position属性 mousewheel事件
1.1.2 正文
实现原理
首先,我们讲解一?a href="http://www.zw2.cn/zhuanti/guanyuluzuowen/" target="_blank" class="keylink">路糯缶敌Ч氖迪址绞剑?/p>
方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置。
方法二:对原图片进行放大,也就是调整原图的长和宽。
上面我们介绍了通过两种方式实现放大镜效果,接下来,我们将以上的两种方式应用到我们的jQuery插件中。
首先,我们需要一个img元素显示原图对象,还需要一个容器作为显示框;显示框里面存放大图对象。当鼠标移动到原图上时,通过对大图进行绝对定位来显示对应的部位,实现类似放大镜的效果。
接下来,让我们定义Index.html页面,具体实现如下:
上面,我们定义了small对象用于显示原图,而large对象作为一个显示框用来显示大图的对应位置。 mousemove事件
接下来,我们通过jQuery插件形式来实现放大镜效果,当鼠标移动到small对象上方时,就会在large对象中显示大图的对应位置,这就涉及到mousemove事件了,所以,我们需要实现mousemove事件的监听方法(如何定义jQuery插件可以参考《自定义jQuery插件Step by Step》)。
现在,让我们实现jquery.imagezoom.js插件吧!
上面,我实现了mousemove事件的监听方法,当鼠标移动到magnify对象中,我们需要获取当前鼠标的相对坐标位置,下面我们通过图片讲解如何获取鼠标的相对坐标位置。
相对坐标
图1鼠标相对坐标位置
当鼠标移动到magnify对象中,我们需要获取鼠标在magnify中的相对坐标位置,这里我们把相对坐标定义为(mx,my),通过上图我们知道相对坐标等于(pageX - offsetLeft, pageY - offsetTop)。
现在,我们已经获取鼠标在magnify对象中的坐标值,接下来,需要获取对应大图的相应坐标,这里我们把大图的对应坐标定义为(rx,ry),我们可以通过比例关系获取(rx,ry)的值。
mx / small.width (原图的宽)= rx / native_width(大图的宽)
my / small.height (原图的长)= ry / native_height(大图的长)
通过上面的比例关系,我们知道大图的坐标(rx,ry)等于(mx/small.width*native_width,
my/small.height*native_height)。
通过上述的公式,我们可以获取大图对应坐标位置,当鼠标移动到magnify对象中就显示对应位置的大图部位,接下来我们需要实现大图的加载实现了。
background-position属性
在实现大图加载显示之前,首先介绍CSS中背景定位background-position的知识。
图2 CSS background-position
上面,有一个100x100像素的图片它由四种颜色组成,而且每种颜色占50 x50像素,接下来,我们将通过修改该图片CSS的background-position属性值来显示该图片的不同位置。
我们看到在大正方形下有两行小正方形,它们显示的颜色位置都不相同,这里我们通过修改每个div元素CSS的background-position属性值实现的。
例如:第一行的蓝色方形,我们设置CSS的background-position属性为:0px -50px;
这相当于原图往上移动50px,第一行的其他方形也通过左右和上下移动实现的。
但第二行的方形就显得更加奇怪了,因为它们都由四种颜色组成,而且颜色的位置都不一样,这究竟是怎样实现的呢?
例如:第二行的第一个方形,我们设置CSS的background-position属性为:25px 25px;这相当于原图向下和向右移动了25px,由于image wrap的作用它会填充剩余位置的颜色。
现在,我们已经了解到了CSS的background-position属性的作用,所以我们通过修改large对象的background-position属性来显示对应的图像部分,具体实现如下:
上面,我们通过加载大图的方式来实现放大镜效果,接下来,我们将介绍通过调整原图的长和宽来实现放大镜效果。
篇三:如何用PS做放大镜效果
如何用PS做放大镜效果
原图
效果图
(转载于:www.smhaida.com 海 达 范 文网:放大镜图片)1、 找到合适的照片素材,打开素材图片
2、 使用椭圆工具创造轮选择放大玻璃显示在下面的图片和按下Ctrl + D来复制到新层中指定的地区
3、 向下移动图层1,放大图层
1
4、 复制图层1,选择>载入选区,然后选择滤镜>扭曲>球面化
篇四:CSS放大镜图片添加教程(1)
图片地址全是src=后的引号内
要先找到小图片地址,然后找到小图地址前的class=,这个后面的整个单词(一般有下划线
) 红框内为小图地址,绿框内为样式名
在下面代码中查找小图前的样式名(class=(样式名))找到后,在后面的代码里找到的第一个src=就是大图地址的添加的地方
高中作文