HTML页面放大镜效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5网页放大效果</title>
<style>
.a {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
width: 200px;
height: 200px;

display: block;
margin: 100px auto;
color: #fff;
text-align: center;
line-height: 200px;
font-size: 20px;
font-weight: bold;
}

.a:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
</style>
</head>

<body>
<a class="a">网页放大效果,基于HTML5</a>
</body>

</html>

<!--转载注明出处-->

时间: 2024-10-26 14:57:23

HTML页面放大镜效果的相关文章

关于jQuery中实现放大镜效果

1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向大家介绍通过jQuery实现放大镜效果. 目录 实现原理 mousemove事件 相对坐标 background-position属性 mousewheel事件 1.1.2 正文 实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位

原生js实现放大镜效果

放大镜效果主要涉及3个鼠标事件: 1.onmouseover,鼠标移入浮动小方块和显示放大的区域显示: 2.onmousemove,鼠标移动,小方块和放大区域一起移动: 3.onmouseout,鼠标移除小方块和放大区域消失. 其实放大镜效果最主要的是小方块与放大区域的比例及位置: <div id="small_box"> <div class="small_Pic"> <div id="float_box">

【HTML5】Canvas 实现放大镜效果

目录 图片放大镜 效果 原理 初始化 画背景图片 计算图片被放大的区域的范围 绘制放大镜区域 添加鼠标事件 图表放大镜 原理 绘制原始线段 计算原始区域和放大镜区域 计算线段在新坐标系统的位置 绘制放大镜中心点 绘制放大镜 添加事件 图片放大镜 效果 在线演示    源码 原理 首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化 <canvas id="canvas" width="500"

使用jquery实现放大镜效果

实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整原图的长和宽. 上面我们介绍了通过两种方式实现放大镜效果,接下来,我们将以上的两种方式应用到我们的jQuery插件中. 首先,我们需要一个img元素显示原图对象,还需要一个容器作为显示框:显示框里面存放大图对象.当鼠标移动到原图上时,通过对大图进行绝对定位来显示对应的部位,实现类似放大镜的效果. 接下来,让我们定义Index.html页

利用jqueryzoom实现图片放大镜效果

在你的页面中包含 jqzoom.css Html代码   <link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen"> 包含 jQzoom 和 jQuery JS 代码: Html代码   <script type="text/javascript" src="your_pat

带放大镜效果的jQuery LightBox图片画廊插件

zbox是一款带放大镜效果的jQuery LightBox图片画廊插件.该Lightbox插件可以显示相应缩略图的高清大图,并且在浏览高清大图时还可以使用放大镜来局部查看放大效果. 在线预览   源码下载 使用方法 使用该LightBox插件需要引入jQuery和jquery.zbox.css,以及jquery.zbox.js文件 <link type="text/css" rel="stylesheet" href="css/jquery.zbox

jquery实现放大镜效果

放大镜效果,被广泛的应用于商城的商品展示,其效果相比大家都不陌生.其原理也不是很难,那么今天就实现下放大镜效果!? 主要的CSS样式:溢出隐藏overflow:hidden,隐藏图层display:none,定位position ? 用的主要事件:鼠标移动事件mousemove()和鼠标hover() 效果图: 这里需要找2长比例合适的图片,效果会更好 html部分: ? 这里需要使用2长一定比例的图片,在页面中按比例设置2个div中来存放这2长图片,并在小图片的div中按照一定的比例设一个用来

javascript放大镜效果

JS实现放大镜效果 首先我们先设想一下放大镜效果 1.当鼠标进入小盒子的时候,把大图片显示出来 2.当指定移动区域的时候,显示当前放大区域(放大效果) 3.鼠标移除我们让它消失 一.实现页面布局HTML+CSS 二.实现放大镜的功能js 下面来看代码,让你思路变清晰 <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>放大镜</title> &l

在uwp仿IOS的页面切换效果

有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画.导航到新页面时,使用页面前进的动画. UWP自带很多切换效果,位于 Windows.UI.Xaml.Media.Animation 中.与苹果的切换效果最接近的是 PaneThemeTransition (而不是EdgeUIThemeTransition). PaneThemeTransition