2025年2月24日 星期一 甲辰(龙)年 腊月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

特效-Javascript实现购物页面图片放大效果

时间:03-25来源:作者:点击数:57

实现效果

实现代码:

  • <!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>

 

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门