【淘宝】图片放大代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片放大效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#small {
width: 300px;
height: 300px;
border: 1px solid #cdcdcd;
}
#small>img {
width: 300px;
height: 300px;
}
#slider {
width: 140px;
height: 140px;
background: rgba(135,135,135,0.4);
position: absolute;
top: 0;
display: none;

}
#big {
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 310px;
border: 1px solid #cdcdcd;
overflow: hidden;
display: none;
}
</style>
</head>
<body>

<div id="small">
<img src="max.jpg" />

<div id="slider"></div>
</div>

<div id="big">
<img src="max.jpg" />
</div>

//让slider跟随鼠标移动.给小的方块绑定事件
small.onmousemove = function(e) {
var even = e || event; //兼容火狐浏览器
var x = even.clientX - small.offsetLeft - slider.offsetWidth/2;
var y = even.clientY - small.offsetTop - slider.offsetHeight/2;
//水平方向的最大值
var maxX = small.clientWidth - slider.clientWidth;
//竖直方向的最大值
var maxY = small.clientHeight - slider.clientHeight;
if(x<0){
//相当于超出左侧,超出左侧时,拉回
x=0;
}
//超出右侧时拉回
if(x>maxX){
x = maxX;
}
//顶部超出
if(y<0){
y=0;
}
//底部超出
if(y>maxY){
y = maxY;
}
slider.style.top = y + "px";
slider.style.left = x + "px";
//放大的图片的主要实现代码:一个比例计算
big.scrollLeft = x/maxX * (bigImg.clientWidth - big.clientWidth) ;
big.scrollTop = y/maxY * (bigImg.clientHeight -big.clientHeight) ;
}
//鼠标移入事件
small.onmouseenter = function(){
//鼠标移入到原图时候实现,上面出现的小的方块
slider.style.display = "block";
//右侧的大图区域显示出来图片
big.style.display = "block";
}
//添加鼠标移出事件,鼠标移出原图的时候,
small.onmouseleave = function(){
slider.style.display = "none";
big.style.display = "none";
}
</script>
</body>
</html>

【淘宝】图片放大代码相关推荐

仿淘宝商品放大展示效果制作（放大镜效果）
如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...
java下载图片到本地，例如从网上下载图片，下载淘宝图片，下载百度图片等
java下载图片到本地,例如从网上下载图片,下载淘宝图片,下载百度图片. 直接上代码如下: public static void download(String url,String saveFile ...
python爬虫抓收费图片_简单的抓取淘宝图片的Python爬虫
写了一个抓taobao图片的爬虫,全是用if,for,while写的,比较简陋,入门作品. 从网页http://mm.taobao.com/json/request_top_list.htm?type ...
淘宝装修HTML代码大全
http://blog.sina.com.cn/s/blog_506f1f940100hv9d.html 淘宝网店装修HTML代码大全,包括淘宝装修代码,插入图片代码,公告滚动代码,不不一定要懂网站知 ...
JavaScript 生成弹性透明的图片放大代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
JavaScript弹性透明的图片放大代码
代码简介: JavaScript 算法生成弹性透明的图片放大效果,代码值得看一下哦,弹性和缓冲是一个意思,JS缓冲效果在网页中使用很频繁,使用缓冲技术可以制作出超多的精美特效来. 代码内容: View ...
帮我用python写一个淘宝抢购的代码
我很抱歉,但是我不能帮助您编写抢购淘宝商品的代码.这种行为可能违反了淘宝的条款和服务协议.更重要的是,这可能导致商家和其他购买者的不满.请遵守淘宝的条款和服务协议,并且使用抢购功能的时候遵守规则与公平 ...
淘宝抢购python代码-仅供学习
淘宝抢购python代码-仅供学习需要使用的python工具包有 from selenium import webdriver import datetime import time from se ...
淘宝天猫双十一视频代码视频播放代码怎么做如何添加视频代码播放功能自动播放点击播放按钮企业宣传广告视频播放代码生成器代码制作如何设置教程经验分享店铺首页装修
淘宝天猫视频播放代码教程装修淘宝店铺视频插入教程一秒美工助手工具,按照视频教程操作,最后重点:然后发布店铺后才可以播放.
多隆：淘宝第一行代码撰写者的程序世界
为什么80%的码农都做不了架构师?>>> 摘要: 他2000年加入阿里巴巴,是淘宝的创始人之一,是阿里内部公认的技术大牛,在阿里内网上他被贴得最多的标签就是"神&qu ...

【淘宝】图片放大代码

【淘宝】图片放大代码相关推荐

最新文章

热门文章

【淘宝】图片放大 代码

【淘宝】图片放大 代码相关推荐

最新文章

热门文章

【淘宝】图片放大代码

【淘宝】图片放大代码相关推荐