"好玩的放大镜效果" 的另一种实现方法

前段时间嗷嗷有发过"好玩的放大镜效果",今天看了下,发现还有简单的方法也能够实现,即利用内外补丁的调整.
有兴趣的可以在琢磨琢磨.

1
2
3
4
5
6
7
8
9
10

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

换成图片



[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

给放大的分页

给放大的分页

ul#hovershow{
list-style-type: none;
margin: 50px;
width:200px;
float: left;
display: inline;
clear: both;
}
ul#hovershow li{
float: left;
display: inline;
width:20px;
height: 20px;
margin: 2px;

}
ul#hovershow li a {

display: block;
width:20px;
height:20px;
border:1px #999 solid;
color:#0984FF;
background-color:#fff;
text-decoration: none;
line-height: 20px;
font-size: 12px;
text-align: center;
font-weight: bold;
}

ul#hovershow li a:hover{
position: absolute;
width:40px;
height: 40px;
line-height: 40px;
font-size: 32px;
z-index:100;
margin: -10px 0 0 -10px;
}
ul#hovershow li:hover + li a{
position: absolute;
width:30px;
height: 30px;
line-height: 30px;
font-size: 24px;
z-index:99;
margin: -5px 0 0 -5px;
}

给放大的分页

一个好玩的分页,Internet Explorer7或者Firefox可以看到附带的效果,因为真的很懒.美化后的样式没更新上来.因为那个是配合我的页才能用滴..挖哈哈..

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Copyright © 2006 aoao . Some rights reserved.

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

我相信估计有不少初学者对此例子中的margin没有理解透，如果你没有理解或理解透请看下图，如果你很熟悉了，请一带而过，嘿嘿！

赞 (0)

相关推荐

  • "好玩的放大镜效果" 的另一种实现方法

    "好玩的放大镜效果" 的另一种实现方法

    前段时间嗷嗷有发过"好玩的放大镜效果",今天看了下,发现还有简单的方法也能够实现,即利用内外补丁的调整. 有兴趣的可以在琢磨琢磨. 1 2 3 4 5 6 7 8 9 10 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 换成图片 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 给放大的分页 给放大的分页 ul#hovershow{ list-style-type: none; margin: 50px; width:200px; float: left; di

  • 打字效果动画的4种实现方法(超简单)

    方法一(纯css实现): html代码: <h1 class="typing typing-item">打字动画打字动画打字动画</h1> css样式: .typing{ font-size: 1rem; padding-top: 6%; margin-bottom: 5%; font-weight: normal; letter-spacing: .3rem; -webkit-animation: type 2s steps(50, end) forwards

  • 利用javascript实现的三种图片放大镜效果实例（附源码）

    利用javascript实现的三种图片放大镜效果实例（附源码）

    本文实现的是一款简单的放大镜效果,有三种不同的样式,支持移动端:大家可以直接下载源码进行学习参考,下面来一起学习学习吧. 实现效果如下 效果一 效果二 效果三 调用代码如下 //前面是ID或者Class,后面有init里面参数分别有1,2,3代表三种不同的效果: zoom('#item').init(); //这里写0,或者不写都可以,默认0 zoom('#item').init(1); //效果2 zoom('#item').init(2); //效果3 //另外还有一个参数,就是选择器后面写

  • 原生javascript实现图片放大镜效果

    原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大镜效果. 我在代码中进行了代码编写的思路的说明和详细的代码注释,方便读者,请看代码: <html> <head> <meta charset="UTF-8"> <title>Document</title> <style t

  • 使用jquery实现放大镜效果

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

  • jQuery实现放大镜效果实例代码

    jQuery实现放大镜效果实例代码

    在没给大家做详细文字说明之前,先给大家分享一段简单的jquery实现放大镜效果代码,需要的朋友可以直接拿去代码. $(function(){ var mouseX = 0; //鼠标移动的位置X var mouseY = 0; //鼠标移动的位置Y var maxLeft = 0; //最右边 var maxTop = 0; //最下边 var markLeft = 0; //放大镜移动的左部距离 var markTop = 0; //放大镜移动的顶部距离 var perX = 0; //移动的

  • Android实现放大镜效果的方法实例（附源码）

    前言 应该有很多用过英语应用的同学都看多一个放大镜的效果,就是选中一段文字后,会有一个放大镜,这个究竟怎么实现的呢,我们今天来分析分析. 源码分析 public class ShaderView extends View { private final Bitmap bitmap; private final ShapeDrawable drawable; // 放大镜的半径 private static final int RADIUS = 80; // 放大倍数 private static

  • vue实现tab切换的放大镜效果

    vue实现tab切换的放大镜效果

    本文实例为大家分享了vue实现tab切换的放大镜效果的具体代码,供大家参考,具体内容如下 废话不多说先看效果图 1.我这里并没有加遮罩层,如有需要请自行加上 2.图片建议使用4k高清图片,不然放大后模糊,影响观看心情 3.不用拘泥于样式,关注实现原理即可 4.可能我的方法并不简便,但是也是一种思路,请大家参考 实现原理 第一肯定需要vue.js 第二需要两张图片 左边为现实图片,右边放大后的效果图其实一直存在,只不过鼠标移入现实,鼠标移出消失 放大的图片并不是真正的放大,而是在img标签外套了一

  • js实现购物网站商品放大镜效果

    js实现购物网站商品放大镜效果

    本文实例为大家分享了js实现购物网站商品放大镜效果的具体代码,供大家参考,具体内容如下 首先说一下原理,以天猫某商品放大镜效果为例: 所谓的放大镜效果,其实也是欺骗我们眼球的一种效果,这里我们可以看到,图片显示去下面那一排小图与遮盖层的图片和放大层的图片其实是一样的,只是分辨率不同,所以实现放大镜效果,就需要这么几组分辨率大小不同,但是图片内容相同的图片: 显然,小图中放的就是我这里图片名中带有small的小图了,遮盖层就是正常大小的图,放大层就是带有big的放大的图了,然后再加入适当的位移和显

  • vue3实现淘宝放大镜效果的示例代码

    vue3实现淘宝放大镜效果的示例代码

    目录 实现效果 实现思路 完成小图盒子.遮罩.大图盒子布局 实现鼠标移动到小图盒子显示遮罩和大图盒子 实现鼠标移动遮罩在小图盒子移动 完整代码 总结 实现效果 实现思路 我们实现动图的淘宝放大镜的效果需要4步. 1.完成小图盒子.遮罩.大图盒子布局2.实现鼠标移动到小图盒子显示遮罩和大图盒子3.实现鼠标移动遮罩在小图盒子移动4.实现遮罩的移动范围不能超出小图盒子,且移动时带动大图图片移动 完成小图盒子.遮罩.大图盒子布局 我的布局小图盒子包裹图片.遮罩.大图盒子.小图盒子为相对定位.遮罩.大图盒

随机推荐