【前端】特效-Javascript实现购物页面图片放大效果
实现效果
实现代码:
<!DOCTYPE html>
<html>
<head>
<title>购物图片放大</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big{
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask{
width: 80px;
height: 80px;
background-color: rgba(3,12,60,0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.small{
position: relative;
}
.small img{
width: 200px;
height: 200px;
}
.big img{
height: 1000px;
width: 1000px;
}
img{
vertical-align: top;
}
</style>
</head>
<body>
<!-- 大图片宽度/big框宽度 = small框宽度/mask框宽度，并且小照片宽度 = small框宽度，如BigImg = 1000， SmallImg = small = 200，big=400，那么mask = 80 -->
<div class="box">
<div class="small">
<img src="./resident.jpg" alt="small Image">
<div class="mask"></div>
</div>
<div class="big">
<img src="./resident.jpg" alt="Big Image">
</div>
</div> <script type="text/javascript">
window.onload = function(){
// 鼠标放到小盒子上时，大盒子图片同等比例移动
//技术点：onmouseenter==onmouseover 第一个不冒泡
//技术点：onmouseleave==onmouseout 第一个不冒泡
//步骤：
//1.鼠标放上去显示盒子，移开隐藏盒子
//2.mask跟随移动
//3.右侧的大图片，等比例移动 var box = document.getElementsByClassName("box")[0];
var small = box.firstElementChild || box.firstChild;
var big = box.children[1];
var mask = small.children[1];
var bigImg = big.children[0]; // 1.鼠标放上去显示盒子，移开隐藏盒子（为小盒子绑定事件） // 调用封装好的方法，显示元素
small.onmouseenter = function(){
show(mask);
show(big);
}
// 调用封装好的方法，隐藏元素
small.onmouseleave = function(){
hide(mask);
hide(big);
} // 2. mask跟随鼠标移动
// 绑定事件是onmousemove，事件源是small，只要在小盒子上移动1px，mask也要跟随移动
small.onmousemove = function(event){
// 想移动mask，需要知道鼠标在small中的位置，x作为mask的left值，y作为mask的top值
event = event || window.event;
// 获取鼠标在整个页面的位置
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
// 让鼠标在mask的最中间，减去mask宽高的一半，x、y为mask的坐标
// console.log(pagex + " " + pagey);
var x = pagex - box.offsetLeft - mask.offsetWidth/2;
var y = pagey - box.offsetTop - mask.offsetHeight/2;
// 限制mask的范围，left取值大于0，小于小盒子的宽减mask的宽
if(x<0){
x = 0;
}
if(x>small.offsetWidth - mask.offsetWidth){
x = small.offsetWidth - mask.offsetWidth;
}
if(y<0){
y = 0;
}
if(y>small.offsetHeight - mask.offsetHeight){
y = small.offsetHeight - mask.offsetHeight;
}
// 移动mask
// console.log("x:" + x + " y:" + y);
mask.style.left = x + "px";
mask.style.top = y + "px"; //3.右侧的大图片，等比例移动
// 大图片/大盒子 = 小图片/mask盒子
// 大图片走的距离/mask走的距离 = （大图片-大盒子）/（小图片-mask）
//比例var times = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);
//大图片走的距离/mask盒子走的距离 = 大图片/小图片
var times = bigImg.offsetWidth/small.offsetWidth;
var _x = x * times;
var _y = y * times; bigImg.style.marginLeft = -_x + "px";
bigImg.style.marginTop = -_y + "px";
}
}
// 显示隐藏元素
function show(element){
element.style.display = "block";
}
function hide(element){
element.style.display = "none";
}
</script>
</body>
</html>
【前端】特效-Javascript实现购物页面图片放大效果的更多相关文章
- jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 为BlueLake主题增加图片放大效果
fancyBox 是一个流行的媒体展示增强组件,可以方便为网站添加图片放大.相册浏览.视频弹出层播放等效果.优点有使用简单,支持高度自定义,兼顾触屏.响应式移动端特性,总之使用体验相当好. 现在,我们 ...
- js图片放大效果
实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.
- magento中如何实现产品图片放大效果
Magento列表页用jQuery实现产品图片放大效果今天看到个网站,鼠标移到列表页的产品图片上,旁边会弹出一个大图,感觉不错,就自己在Magento里写了个.先看看效果 这个效果比较好实现,打开li ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
- (JS+CSS)实现图片放大效果
代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...
- jQuery实现网站图片放大效果
实现效果:当鼠标指向商品图片时,图片会自动放大. <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- [原创]实现android知乎、一览等的开场动画图片放大效果
代码下载地址: https://github.com/Carbs0126/AutoZoomInImageView 知乎等app的开场动画为:一张图片被显示到屏幕的正中央,并充满整个屏幕,过一小段时间后 ...
- iOSUITableView头部带有图片并且下拉图片放大效果
最近感觉UITableview头部带有图片,并且下拉时图片放大这种效果非常炫酷,所以动手实现了一下,效果如下图: 1.gif 实现原理很简单,就是在UITableview上边添加一个图片子视图,在ta ...
随机推荐
- java基础---->多线程之ThreadLocal（七）
这里学习一下java多线程中的关于ThreadLocal的用法.人时已尽,人世还长,我在中间,应该休息. ThreadLocal的简单实例 一.ThreadLocal的简单使用 package com ...
- MQTT的学习研究（九）基于HTTP GET MQTT 抓取消息服务端使用
官方参看文档: HTTP GET 接收主题请求协议和响应协议http://publib.boulder.ibm.com/infocenter/wmqv7/v7r0/topic/com.ibm.mq.c ...
- weblogic jprofile配置
前提: 1.安装好weblogic 2.安装好jprofile 非等待模式: export JAVA_OPTIONS="${JAVA_OPTIONS} -Dweblogic.threadpo ...
- 日志系统实战 AOP静态注入
http://www.cnblogs.com/mushroom/p/3932698.html http://www.cnblogs.com/mushroom/p/4124878.html http:/ ...
- 字符串处理（String）
字符串类型(String类)需要注意的几个函数: 1.字符串的连接.一般而言,Java不允许运算符直接应用到String对象,唯一的例外是"+"运算符,它用来连接两个字符串,产生一 ...
- 170621、springboot编程之全局异常捕获
1.创建GlobalExceptionHandler.java,在类上注解@ControllerAdvice,在方法上注解@ExceptionHandler(value = Exception.cla ...
- java个人所得税计算器
class Caculate{ private String name; private double money; private double actual; /** * @param usern ...
- 各大互联网企业Java面试题汇总，看我如何成功拿到百度的offer
前言 本人Java开发,5年经验,7月初来到帝都,开启面试经历,前后20天左右,主面互联网公司,一二线大公司或者是融资中的创业公司都面试过,拿了一些offer,其中包括奇虎360,最后综合决定还是去百 ...
- CMDB内功心法，助我登上运维之巅
很多70.80后甚至90后都在金庸.古龙.梁羽生先生等武林大家熏陶下成长的,这么多年过去了,我的武侠梦依然不曾散去.曾几何,梦想有一天练就一身绝学,搂着小师妹花前月下,仗剑走天涯,快意人生.可每次的酣 ...
- [Luogu4331][Baltic2004]数字序列
原题请见<左偏树的特点及其应用>BY 广东省中山市第一中学 黄源河 luogu 题意 给出序列\(a[1...n]\),要求构造一个不下降序列\(b[1...n]\)使得\(\sum_{i ...