我试过了,效果很好,可以试试!
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>仿淘宝网的UED相册,可图片放大</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script>
<style>
body { font-size:12px; padding:0}
</style>
<script language="javascript">
pic={
href:"http://www.codefans.net/jscss/demoimg/201105/b.jpg",
boxSize:250,
width:1330,
height:2128,
creatImg:function(id){//创建图片
var width = $("#"+id).css("width");
$("#"+id).append("<img src='"+this.href+"' style='width:"+width+"'/>");
$("#"+id).append("<div id='bigImg'></div>");
var that = this;
$("#"+id).mousemove(function(e){
var x = e.pageX-$(this).offset().left;
var y = e.pageY-$(this).offset().top;
if((x<parseInt(width) && x>0) && (y<that.height/that.multiple() && y>0)){
$("#bigImg").fadeIn(200);
that.creatBigImg(x,y);
}else{
$("#bigImg").fadeOut(200);
}
});
},
multiple:function(id){//和实际图片的倍数关系
return this.width/parseInt($("#pic").css("width"));
},
bigBoxPost:function(x,y){//大图的坐标
return [x-this.boxSize/2,y-this.boxSize/2];
},
bigLoadPost:function(x,y){//大图的坐标
return [-(x*this.multiple()-this.boxSize/2),-(y*this.multiple()-this.boxSize/2)];
},
creatBigImg:function(x,y){
var that = this;
$("#bigImg").css({
width:that.boxSize,
height:that.boxSize,
border:"#FFF 5px solid",
position:"absolute",
top:that.bigBoxPost(x,y)[1],
left:that.bigBoxPost(x,y)[0],
background:"url("+that.href+") no-repeat",
backgroundPosition:that.bigLoadPost(x,y)[0]+"px "+that.bigLoadPost(x,y)[1]+"px"
})
}
}
$(document).ready(function(){
pic.creatImg("pic");
})
</script>
</head>
<body >
<div id="pic" style=" width:500px; position: relative; margin:100px;"></div>
</body >
</html>
分享到:
相关推荐
仿淘宝放大镜效果,分享一下。
仿淘宝商品图片放大镜效果,大图片下面有小图片列表,单击小图片切换,鼠标移到大图片上面右侧出现图片的放大效果!
jQuery仿淘宝评价晒图图片放大查看代码是一款类似淘宝晒图评论图片展示插件,支持多条图片评论。
jQuery实现类似淘宝商品图片展示、图片放大镜,鼠标移动至图片时放大该图片当前鼠标停留位置!
1.本demo是一个类似于淘宝放大镜的效果。 2.使用vue3+vite搭建 3.实现了图片点击轮播和移入放大的效果 4.下载下来可直接使用,必须真实 有问题可以直接提问
仿淘宝多图片放大镜效果
使用react写一个仿图片放大镜效果使用react写一个仿图片放大镜效果
原生JS 仿淘宝放大镜效果,鼠标移入选择图片局部,在右边弹出显示图片局部放大效果
仿淘宝图片放大镜功能,移动经过时放大,js
仿淘宝放大镜,非鼠标指向切换。鼠标点击切换图片,需要的可以修改下。
完全仿淘宝的图片放大功能,可以放大一组的!
简单易用的仿淘宝放大镜效果精简版(下面带小图片列表),没有无用代码,代码简短易用,不加密,下载直接就可以用
JavaScript 实现类似淘宝的图片跟随鼠标局部放大的效果
仿淘宝商城 放大镜 jquery 特效 缩略图
本人参考淘宝的商品详细页商品放大镜效果来制作,商品图片可以为各种矩形,放大规则同淘宝相似。css中的样式可进行各种样式修改。支持IE6及以上版本
一款基于jQuery实现的类似淘宝网商品图片放大镜插件,有多种显示效果。
Android 仿淘宝详情页下拉放大图片 ,有图片切换 Android 仿淘宝详情页下拉放大图片截图
移动焦点放大图片局部(仿淘宝3图版)
一款图片放大效果展示, 鼠标放到指定图片上时放大图片, 像淘宝的商品展示页面一样, 鼠标放上去, 可放大图片