详情页html特效,js实现详情页放大镜效果
本文实例为大家分享了js实现详情页放大镜的具体代码,供大家参考,具体内容如下
1.html
2.css
*{
margin:0;padding:0;
}
#small{
width:400px;
height:400px;
position:relative;
box-shadow: 0 0 5px #000;
}
#small img{
/* 图片百分百,完全覆盖原始框 */
width:100%;
height:100%;
}
#frame{
width:100px;
height:100px;
position:absolute;
box-shadow:0 0 5px #000;
top:0;
left:0;
/* 在鼠标移入原始框的时候才显现,所以初始值为隐藏 */
display: none;
/* 在放大镜中插入背景图,根据背景图定位,改变放大镜中和原始框中的图片一一对应 */
/* 0 0 即为background-position的值 */
background: url(img/timg.jpg) no-repeat 0 0;
/* CSS2中的内容要和CSS3中的分开 */
background-size: 400px 400px ;
}
#big{
width:400px;
height:400px;
position:relative;
box-shadow: 0 0 5px #000;
/* 因为放大框中的内容
与放大镜是16:1放大的,
所以原始框与放大框相同大小的情况下
使用overflow: hidden;用放大框截取插入图片的大小 */
overflow: hidden;
/* 在鼠标移入原始框的时候才显现,所以初始值为隐藏 */
display: none;
}
#big img{
width:1600px;
height:1600px;
position: absolute;
left: 0;
top:0;
}
#big,#small{
margin-left: 100px;
float: left;
}
#mo{
/* 最上边的一层膜宽高100%,层级在最上层,完全覆盖住原始框,
确保鼠标在原始框上移动时,放大镜能跟着稳定的移动,
即鼠标移动的参照物唯一 */
width:100%;
height:100%;
z-index: 999;
position: absolute;
}
3.js
//获取原始框
var oSmall = document.getElementById("small");
//获取放大框
var oBig = document.getElementById("big");
//获取放大镜
var oFrame = document.getElementById("frame");
//获取放大框中的图片
var oBig_img = oBig.children[0]
//获取原始框中的图片
var oSmall_img = oSmall.children[1];
//鼠标移入事件(注:没有兼容问题)
//放大镜和放大框显现出来
oSmall.onmouseenter = function(){
oBig.style.display = "block";
oFrame.style.display = "block";
//鼠标移入图片变模糊
oSmall_img.style.opacity = "0.3";
}
//鼠标移出事件(注:没有兼容问题)
//放大镜和放大框变回原始的隐藏状态
oSmall.onmouseleave = function(){
oBig.style.display = "none";
oFrame.style.display = "none";
//鼠标移出,图片变清晰
oSmall_img.style.opacity = "1"
}
//鼠标移动事件(注:有兼容问题)
oSmall.onmousemove = function(event){
//解决兼容问题
var e = event || window.event;
//获取鼠标在放大镜中心的位置坐标(用于判断放大镜不会移出原始框)
//获取位置用offsetX/offsetY
//size初始值为100,与放大镜未放大之前一致,
//size/2是为了获取鼠标在放大镜的中心点
//用size而不是定值,是为了后边放大镜随鼠标滚轮滚动放大缩小时
//鼠标能一直在放大镜中心位置
//e.offsetY/e.offsetX是鼠标到原始框边框的距离
//size / 2是鼠标到放大镜边框的距离
//nTop/nLeft是放大镜边框到原始框边框的距离
var nTop = e.offsetY - size / 2;
var nLeft = e.offsetX - size / 2;
//判断放大镜的临界值
//不小于最小值,不大于最大值
//判断放大镜的最小值
if(nTop <= 0){
//差一点就等于零的时候,也赋值为零
nTop = 0;
}
if(nLeft <= 0){
nLeft = 0;
}
//判断放大镜的最大值
//因为坐标只有offsetLeft 和 offsetTop两个,所以计算最大值时:
//需要获取放大镜的左和上的边框到原始框的左和上的边框的最大距离与原始框的坐标位置进行比较
//offsetHeight/offsetWidth获取元素的宽高
//原始框的宽高 - 放大框的宽高 == 放大镜可以移动的最大值
var maxTop = oSmall.offsetHeight - oFrame.offsetHeight;
var maxLeft = oSmall.offsetWidth - oFrame.offsetWidth;
//放大镜的边框大于等于最大值,停
if(nTop >= maxTop){
nTop = maxTop;
}
if(nLeft >= maxLeft){
nLeft = maxLeft;
}
//放大镜的位置坐标
oFrame.style.top = nTop + "px"
oFrame.style.left = nLeft + "px"
//计算放大镜和放大框之间的缩放比例
//计算比例用offsetWidth/offsetHeight
var propX = oBig.offsetWidth/oFrame.offsetWidth;
var propY = oBig.offsetHeight/oFrame.offsetHeight;
//-nTop/-nLeft用负值,使放大框中的内容与放大镜所停的位置一致(图片内容移动方向相同)
//如果是正值,放大镜移动时与放大框中的内容相反移动(放大框中不会出现对应的放大图片)
oBig_img.style.top = -nTop*propY + "px"
oBig_img.style.left = -nLeft*propX + "px"
//鼠标移入时,放大镜清晰,原始框模糊
//利用改变插入到放大镜中的背景图的position,进行图片的一一对应
//注意:``里的${}和${}中间用空格隔开
oFrame.style.backgroundPosition = `${-nLeft}px ${-nTop}px`;
}
//鼠标滚轮事件
//注意:兼容问题
//设置size初始值为100,即放大镜未放大缩小时的原始状态
//通过判断滚轮的上下滚动方向,改变放大镜的大小,即宽高同时增大或缩小
var size = 100;
//解决兼容问题
//FF(火狐)
if(document.addEventListener){
//第一个参数是事件名称,
//第二个参数是事件处理函数,
//第三个参数是一个被废弃的参数,是以事件捕获的形式,还是事件冒泡的形式触发事件,默认false
//第三个参数基本用不到
document.addEventListener('DOMMouseScroll',handleEvent,false);
}
//IE/Opera(欧鹏)/Chrome(谷歌)
window.onmousewheel = document.onmousewheel = handleEvent;
// 分辨滚轮向上还是向下;
function handleEvent(event){
var e = event || window.event;
// FF => detail 向上 是 负数 ;
// 向下 是 正数;
// Chrome => deltaY 向上 是 负数;
// 向下 是 正数;
var flag = true
if(e.detail != 0 ){
// 说明浏览器是火狐;
if(e.detail > 0){
flag = false// 向下;
}else{
flag = true;// 向上;
}
}else{
//说明浏览器是IE/Opera/Chrome
if(e.deltaY > 0){
flag = false// 向下;
}else{
flag = true;// 向上;
}
}
//滚轮向上时,放大镜变大,放大框中的内容缩小;
//滚轮向下时,放大镜缩小,放大框中的内容变大;
if(flag){
// 向上
size ++;
}else{
size --;// 向下
}
//将size值赋给放大镜
oFrame.style.width = size + "px";
oFrame.style.height = size + "px";
//当鼠标放在原始框上一动不动时,放大镜也不会再增大了
oSmall.onmousemove(e);
//放大缩小后放大镜和放大框的比例发生了变化,导致放大框中的内容与放大镜所在位置不符
// 根据放大镜的缩放,重新计算放大框与放大镜之间的缩放比例
var prop = 400 / size;
// 根据比例缩放放大框中的图片 ;
oBig_img.style.width = 400 * prop + "px";
oBig_img.style.height = 400 * prop + "px";
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
详情页html特效,js实现详情页放大镜效果相关推荐
- js+css+html实现放大镜效果
js+css+html实现放大镜效果 1 案例描述 2 编写HTML代码 3 编写CSS代码 4 编写JavaScript代码 5 总代码 1 案例描述 在很多网页中,我们都能看到一个类似于放大镜的效 ...
- php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
- 如何用源生js做出淘宝放大镜效果?
如何用源生js写出淘宝的放大镜效果~? 1,先写出静态界面,分别是两个div,一个div放小图片,另一个div放大图片.(当然这两张图片是一样的,只是大小不一样.) 2.大的那张图片要用backgro ...
- JS案例-仿京东放大镜效果
需要实现的效果图如下: ①布局:布局采用一个大盒子里面首先分为上下两个部分,然后下部分又分为左右两个部分.左边的盒子里面放了一个img和一个遮罩层cover,右边盒子里面放的是800*800的大图片, ...
- html 放大镜 js,原生js实现简单的放大镜效果
前言: 相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. h ...
- js实现淘宝放大镜效果
记得很久以前,小编就准备写个放大镜,但是种种原因导致,一直没有完成这个愿望,下面,让我们一起来实现这个常见的功能吧.不懂的同学,可能认为这很难细实现,觉得它很博大精深的样子,其实真了解他了,你会发现原 ...
- js+html2canvas实现网页放大镜效果:放大镜图片使用css样式background背景图,鼠标移动使用样式background-position动态设置
实现效果: 鼠标移动到需要放大的网页上时,鼠标静止不动500毫秒后,一个长方形的放大镜框显示,放大镜中显示当前区域2.2倍的效果,并且这时候鼠标移动放大的区域也跟着变化.放大镜限制:放大 ...
- html下一页怎么实现,JS代码实现页面切换效果(上一页+具体页+下一页)
HTML+CSS部分 添加所有页面,和上一页.具体页.下一页的按钮, 设置div样式,默认第一页显示,其他页隐藏. .item { display: none; width: 300px; heigh ...
- js在html中加文字走马灯特效,JS实现文字的走马灯效果
北京欢迎你 // //var x = 20; // //alert(isNaN(x)); //判断其是不是数字 // function scroll() { ...
最新文章
- python正则匹配ip地址_Python正则表达式匹配和提取IP地址
- 完美解决Centos不能ping百度的问题
- yelee主题中加入revolvermaps插件
- CF11D-A Simple Task【状压dp】
- freebsd nginx php mysql_FreeBSD 安装配置Nginx+PHP+APC+MySQL
- document.write() 和writeln()方法注意事项
- webgl存本地文件_20万存款该怎么存?银行员工:这样存,每年利息近万元!
- 422器件与lvds接收器的区别_TVS管与ESD保护二极管的区别
- 关于Ant Design中的Modal组件的各种回调方法在调用后台时报页面崩溃的错误。
- 整理了上千个Python类库,简直太酷啦!
- ips细胞再生视网膜研究进展
- 腾讯文档的表格设置行高
- linux下 exp导出时报sh:exp:找不到,是什么原因,exp/imp(导出/导入)
- 【无标题】h5跳转微信公众号关注页面
- 文字校验的工具类--中文,电话号码,邮箱,身份证等信息的校验
- 中国上市互联网公司市值排名
- 关于计算机的优点英语作文,初三英语作文电视电脑的优缺点
- 可恶的定理,但是却有大用
- opencv 最小二乘法拟合曲线
- linux自己的软件在安装的时候如何创建快捷方式,在Deepin Linux系统下给AppImage格式软件创建快捷方式的方法...
热门文章
- 干货!PHP开发插件机制的设计与开发 以Thinkphp多用户商城系统为例
- 笔算登月轨道的NASA传奇科学家、[人型计算机]凯瑟琳·约翰逊去世
- 极限环的matlab代码,matlab 数学实验 实验报告 欧拉公式 ROSSLER微分方程
- OneUI极强的 Bootstrap 管理仪表板模板
- 100层楼,2个玻璃杯
- 【哈佛积极心理学笔记】第2讲 为什么要学习积极心理学
- wordpress模板安装- wordpress中文主题插件如何安装
- 图书管理系统开发实例开发日志
- 凉风起天末,君子意如何
- python编程图画梅花_Python之那些好玩的图画