JavaScript写放大镜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#middle {
width: 400px;
height: 400px;
position: absolute;
top : 50px;
left : 100px;
border: 1px solid;
}
#middle img {
width: 400px;
height: 400px;
}
#len {
width: 200px;
height: 200px;
background: #f00;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
display: none;
}
#big {
width: 400px;
height: 400px;
position: absolute;
top : 50px;
left : 520px;
border:1px solid;
overflow: hidden;
display: none;
}
#big img {
width: 800px;
height: 800px;
position: absolute;
top : 0;
left : 0;
}
</style>
</head>
<body>
<div id="middle">
<img src="data:images/middle.jpg">
<div id="len"></div>
</div>
<div id="big">
<img src="data:images/big.jpg" id="big_img">
</div>
<script src="js/tools.js"></script>
<script>
/* 鼠标移入/移出 div#middle */
$("#middle").onmouseenter = function(){
$("#len").style.display = "block";
$("#big").style.display = "block";
}
$("#middle").onmouseleave = function(){
$("#len").style.display = "none";
$("#big").style.display = "none";
}
// 求 div#middle 元素在文档中定位
var middleOffset = offset($("#middle"));
/* 鼠标在 div#middle 上移动 */
$("#middle").onmousemove = function(e){
// 镜头坐标
var _top = e.pageY - middleOffset.top - 100,
_left = e.pageX - middleOffset.left - 100;
// 判断镜头是否在div#middle中图范围内移动
if (_top < 0)
_top = 0;
else if (_top > 200)
_top = 200;
if (_left < 0)
_left = 0;
else if (_left > 200)
_left = 200;
更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118599333
JavaScript写放大镜效果的更多相关文章
- JavaScript之放大镜效果2
在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...
- JavaScript之放大镜效果
在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...
- javascript图片放大镜效果展示
javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
- 【JavaScript】放大镜效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生javascript写的侧栏跟随效果
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...
- 原生javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
- 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
- JavaScript仿淘宝实现放大镜效果的实例
我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...
- JavaScript图形实例：图形放大镜效果
1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...
随机推荐
- ASP.NET Core的几种服务器类型[共6篇]
作为ASP.NET CORE请求处理管道的"龙头"的服务器负责监听和接收请求并最终完成对请求的响应.它将原始的请求上下文描述为相应的特性(Feature),并以此将HttpCont ...
- windows批处理执行图片爬取脚本
背景 由于测试时需要上传一些图片,而自己保存的图片很少. 为了让测试数据看起来不那么重复,所以网上找了一个爬虫脚本,以下是源码: 1 import requests 2 import os 3 4 c ...
- 如何基于ZEGO SDK 实现通话质量监测
如何基于ZEGO SDK 实现通话质量监测 1 功能简介 在进行视频通话过程中,用户有时候会出现网络不好的情况,比如在进行多人视频通话或者多人唱歌时,我们需要实时显示用户的网络质量. 示例源码 请参考 ...
- 用python爬虫，对12306网站进行模拟登陆
from selenium import webdriver from time import sleep from PIL import Image from selenium.webdriver ...
- 关于python中selenium一些知识点
selenium几种元素操纵方法 切换iframe层 #切换至xx iframe层 driver.switch_to.frame("name and id") # 切回主HTML层 ...
- 《手把手教你》系列基础篇（九十五）-java+ selenium自动化测试-框架之设计篇-java实现自定义日志输出（详解教程）
1.简介 前面宏哥一连几篇介绍如何通过开源jar包Log4j.jar.log4j2.jar和logback实现日志文件输出,Log4j和logback确实很强大,能生成三种日志文件,一种是保存到磁盘的 ...
- Jenkins Build step 'Execute shell' marked build as failure
问题出现: Jenkins一直都构建成功,今天突然报错:Jenkins Build step 'Execute shell' marked build as failure 问题原因: By defa ...
- 浅尝Spring注解开发_AOP原理及完整过程分析（源码）
浅尝Spring注解开发_AOP原理及完整过程分析(源码) 浅尝Spring注解开发,基于Spring 4.3.12 分析AOP执行过程及源码,包含AOP注解使用.AOP原理.分析Annotation ...
- Linux主流发行版本配置IP总结（Ubuntu、CentOS、Redhat、Suse）
我们先了解下IP的概念 IP地址简介 电脑连接互联网的必要条件:IP地址+子网掩码+网关+DNS IP地址是上网的唯一标识 - IPv4地址分类: IPv4地址分为A-E共计5类地址,其中A.B.C是 ...
- PTA 7-4 堆栈操作合法性 (20 分)
假设以S和X分别表示入栈和出栈操作.如果根据一个仅由S和X构成的序列,对一个空堆栈进行操作,相应操作均可行(如没有出现删除时栈空)且最后状态也是栈空,则称该序列是合法的堆栈操作序列.请编写程序,输入S ...