放大镜旋转 css,CSS放大镜(增加缩放级别)
首先:我对Javascript很少熟悉,但主要是我做CSS和HTML。
我正在创建一个网站,我有一个非常大的图像,所以我下载了一个代码来实现图片上的放大镜效果。然而,图像有很多细节需要放大更多才能欣赏。有没有什么办法可以修改这段代码来创建更深层次的图像缩放?
这是我使用的代码:
我相信这是创建放大镜效果的代码中最相关的部分:
$(document).ready(function(){
var native_width = 0;
var native_height = 0;
$(".large").css("background","url('" + $(".small").attr("src") + "') no-repeat");
//Now the mousemove function
$(".magnify").mousemove(function(e){
//When the user hovers on the image, the script will first calculate
//the native dimensions if they don't exist. Only after the native dimensions
//are available, the script will show the zoomed version.
if(!native_width && !native_height)
{
//This will create a new image object with the same image as that in .small
//We cannot directly get the dimensions from .small because of the
//width specified to 200px in the html. To get the actual dimensions we have
//created this image object.
var image_object = new Image();
image_object.src = $(".small").attr("src");
//This code is wrapped in the .load function which is important.
//width and height of the object would return 0 if accessed before
//the image gets loaded.
native_width = image_object.width;
native_height = image_object.height;
}
else
{
//x/y coordinates of the mouse
//This is the position of .magnify with respect to the document.
var magnify_offset = $(this).offset();
//We will deduct the positions of .magnify from the mouse positions with
//respect to the document to get the mouse positions with respect to the
//container(.magnify)
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
//Finally the code to fade out the glass if the mouse is outside the container
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(".large").fadeIn(100);
}
else
{
$(".large").fadeOut(100);
}
if($(".large").is(":visible"))
{
//The background position of .large will be changed according to the position
//of the mouse over the .small image. So we will get the ratio of the pixel
//under the mouse pointer with respect to the image and use that to position the
//large image inside the magnifying glass
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
//Time to move the magnifying glass with the mouse
var px = mx - $(".large").width()/2;
var py = my - $(".large").height()/2;
//Now the glass moves with the mouse
//The logic is to deduct half of the glass's width and height from the
//mouse coordinates to place it with its center at the mouse coordinates
//If you hover on the image now, you should see the magnifying glass in action
$(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})
放大镜旋转 css,CSS放大镜(增加缩放级别)相关推荐
- html图片缩放6,四款css 图片按比例缩放实例(兼容ie6,7,firefox)
使用max-width,max-height:或者min-width,min-height的css属性即可.如: 代码如下 img{max-width:100px;max-height:100px;} ...
- [css] css图片缩放失真出现锯齿的如何解决呢?
[css] css图片缩放失真出现锯齿的如何解决呢? 1.-ms-interpolation-mode,这是针对IE的解决方案.其值设置为bicubic. 2.image-rendering,这是提供 ...
- CSS——CSS基础(一篇就够用)
CSS--CSS基础(一篇就够用) 一.CSS概述 1.什么是css 2.作用 3.css和html属性的使用原则 二.CSS语法规范 1.css的使用方式 ①行内样式,内联样式 ②内部样式 ③外部样 ...
- simple css 汉化,Simple CSS(CSS文档生成器)
Simple CSS(CSS文档生成器)简介 Simple CSS(CSS文档生成器)简介一:Simple CSS是一款CSS文档生成器,帮助网页开发人员快速生成CSS样式,Simple CSS使用非 ...
- 根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
最近在开发百度地图,需要实现的是地图初始化的时候,能够把我们所有的标注点markers显示在地图上,并且让地图有一个合适的显示级别.以提高用户体验. 找到了了解决方案: 百度地图每一个显示级别对应了一 ...
- 瓦片地图面面观之缩放级别
缩放级别 我们知道瓦片地图基于瓦片,而瓦片本身是栅格数据,无法再保证不损失图元数据的情况下对其连续缩放.因此瓦片地图一般通过定义缩放级别的方式来实现瓦片地图的层级缩放. 一般瓦片地图定义缩放级别在1~ ...
- 坐标范围计算显示缩放级别zoom自适应显示地图
坐标范围计算显示缩放级别zoom自适应显示地图 1.数据: //数据准备 var points = [`在这里插入代码片`{"lng":116,"lat":40 ...
- html5ie11缩放,如何设置缩放级别Internet Explorer 9 - Browsers | Microsoft Docs
如何在更高版本中设置Internet Explorer 9缩放级别 04/21/2020 本文内容 重要 2022 Internet Explorer 11 桌面应用程序将停用,2022 年 6 月 ...
- 放大镜 讲课_《放大镜》教学设计
<放大镜>教学设计 宁波市鄞州区宋诏桥小学 竺红波 [教学目标] 科学概念 1.放大镜是凸透镜,具有放大物体图像,看清更多细节的作用. 2.放大镜镜片的特点是透明和中间厚,边缘薄:镜片凸度 ...
最新文章
- 人工智能及其应用(第5版).蔡自兴-1章课后习题。【暂时无答案】
- linux 屏幕输出 高亮_如何设置SecureCRT窗口输出代码关键字高亮设置
- mybatis学习(十一)——springmvc++spring+mybatis整合
- HttpURLConnection 中Cookie 使用
- openSUSE中启用apache mod_rewrite
- classpath: spring 中的查找方式
- netflix_Netflix播放按钮剖析
- 在Elasticsearch中索引Java Bean的简单方法
- 使用JAX-RS和Spring构建HATEOAS API
- 华为云电脑和马云无影比_阿里云打造未来电脑无影,却因为5G限制,很难达到普及...
- 关于机器学习,你需要知道的三件事!
- java反射学习笔记(常用的一些方法)
- jq之$(“a[target=‘_blank‘]“)
- jsoup 简单应用
- 2.14 向量化 logistic 回归的梯度输出
- cairo在Gecko上实现的路线图
- 神经网络+CNN模型训练总结:
- python多线程执行_一个Python多线程运行实例
- C语言写程序注意,单片机C语言编程应注意的若干问题
- 怎样把小米手机便签内容转存到百度网盘中去?