JavaScript仿淘宝京东放大镜效果

注意

一定计算好放大比例，本程序放大5倍，具体放大倍数，自定

效果

完整源码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>放大镜效果</title><style>#small{width: 409.6px;/*缩小五倍*/height: 230.4px;position: absolute;}#image1{width: 100%;height: 100%;}#mark{background-color: white;opacity: 0.5;width: 100px;/*跟随鼠标移动的白色滑块大小*/height: 100px;position: absolute;top: 0px;}#big{width: 500px;/*放大的图片显示大小*/height: 500px;position: absolute;top: 8px;left: 700px;overflow: hidden;}#image2{width: 2048px;/*原始大小*/height: 1152px;position: absolute;}</style>
</head>
<body>
<div id="small"><img src="data:image/image01.jpg" id="image1"/><div id="mark"></div>
</div>
<div id="big"><img src="data:image/image01.jpg" id="image2"/>
</div>
<script>var x,y;var small = document.getElementById("small");var mark = document.getElementById("mark");var imge = document.getElementById("image1");var imge2 = document.getElementById("image2");var bigs = document.getElementById("big");small.onmouseenter = function () {mark.style.display = "block";//使白色滑块显示bigs.style.display = "block";//使放大的位置显示放大图片}small.onmouseleave = function () {mark.style.display = "none";bigs.style.display = "none";}small.onmousemove = function (ev) {var e = ev || window.event;x = e.clientX;y = e.clientY;var l = x - 50 - small.offsetLeft;var t = y - 50;//限制白色滑块在图片内部if(l<small.offsetLeft-8){l = small.offsetLeft-8;}if(l>small.offsetLeft+small.offsetWidth-mark.offsetWidth-8){l = small.offsetLeft+small.offsetWidth-mark.offsetWidth-8;}if(t<small.offsetTop-8){t = small.offsetTop-8;}if(t>small.offsetTop+small.offsetHeight-mark.offsetHeight-8){t = small.offsetTop+small.offsetHeight-mark.offsetHeight-8;}mark.style.left = l + "px";//白色滑块跟随鼠标移动mark.style.top = t + "px";imge2.style.left = l*-5+"px";//放大图片跟随鼠标反方向移动imge2.style.top = t*-5+"px";}
</script>
</body>
</html>

JavaScript仿淘宝京东放大镜效果（鼠标事件）------JavaScript学习之路10相关推荐

使用react 写一个仿淘宝图片放大镜效果
效果图人狠话不多,先上效果图,看看是不是各位想要的再往下看使用方法 import React, { Component } from "react"; import Image ...
js实现天猫淘宝购物放大镜效果
前言分享一个笔者写过的js实现天猫淘宝购物放大镜效果的例子正文代码如下: <!DOCTYPE html> <html><head><meta chars ...
纯css仿淘宝京东导航菜单栏
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
仿淘宝京东商品规格属性选择的最简单实现
仿淘宝京东商品规格属性选择的最简单实现商城里面的规格选择,网上大部分是自定义控件实现的,显得很是麻烦,而我的实现方式是大家最常用的控件RecyclerView,特点是性能好,简单.废话不多说,先看实 ...
JavaScript仿淘宝智能浮动
JavaScript仿淘宝智能浮动我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡. ...
仿淘宝图片局部放大效果
本人前端小白一枚做了个仿淘宝的图片放大效果与大家分享一下,还望大神批评主要思路是水平放两个同等大小的div用来分别盛放原图和放大后的图片.下图所示在img1和img2中放入相同的图片,div2 ...
Javascript小案例（一）：仿淘宝搜索框用户输入事件的实现
淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: (截图日期:2017年6月18日) 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋 ...
[转] JavaScript仿淘宝智能浮动
转载自: http://www.williamlong.info/archives/2864.html 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动 ...
Android仿淘宝京东商品规格参数颜色筛选
Android 选择商品属性sku 最近项目中使用SKU属性查询,类似淘宝京东商品的选择,在网上查询了弄了几个源码看看,发现还是实现不了多属性选择问题,再原基础上改动相当费事,所以想干脆自己处理这个问 ...

JavaScript仿淘宝京东放大镜效果（鼠标事件）------JavaScript学习之路10

JavaScript仿淘宝京东放大镜效果

注意

效果

完整源码

JavaScript仿淘宝京东放大镜效果（鼠标事件）------JavaScript学习之路10相关推荐

最新文章

热门文章