"好玩的放大镜效果" 的另一种实现方法
2018-10-12 13:52
344 查看
前段时间嗷嗷有发过"好玩的放大镜效果",今天看了下,发现还有简单的方法也能够实现,即利用内外补丁的调整.
有兴趣的可以在琢磨琢磨.
换成图片
给放大的分页
我相信估计有不少初学者对此例子中的margin没有理解透,如果你没有理解或理解透请看下图,如果你很熟悉了,请一带而过,嘿嘿!
有兴趣的可以在琢磨琢磨.
1 2 3 4 5 6 7 8 9 10
换成图片
给放大的分页
给放大的分页 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可以看到附带的效果,因为真的很懒.美化后的样式没更新上来.因为那个是配合我的页才能用滴..挖哈哈..
Copyright © 2006 aoao . Some rights reserved.
我相信估计有不少初学者对此例子中的margin没有理解透,如果你没有理解或理解透请看下图,如果你很熟悉了,请一带而过,嘿嘿!
![](http://files.jb51.net/upload/2006111495717480.gif)
相关文章推荐
- "好玩的放大镜效果" 的另一种实现方法
- JS实现图片放大镜效果的方法
- 原生JS实现"旋转木马"效果的图片轮播插件
- 实现javaScript对象的"继承"的两种方法(prototype与闭包)
- android 跑马灯效果的另一种实现方法
- JS实现图片放大镜效果的方法
- 用SQL实现统计报表中的"小计"与"合计"的方法详解
- TextView设置android:ellipsize="marquee"属性,无法实现跑马灯效果的解决方法
- PHP如何实现文件写入前追加,如依次写入"我 爱 你",而实现的效果是"你爱我"
- 用SQL实现统计报表中的"小计"与"合计"的方法详解
- Android实现 制作隐藏图片效果 "幻影坦克"
- 如何 "使用" 静态方法约束实现类或子类
- js图片放大镜效果实现方法详解
- JS中使用"data-"开头的属性及data()方法实现自定义属性
- CAGradientLayer实现"滑动来解锁"动画效果
- 另一种实现 Fruit Ninja 里刀光效果的方法
- Android:阴影效果的另一种实现方法:layer-list
- 用SQL实现统计报表中的"小计"与"合计"的方法详解
- Android实现放大镜效果的方法实例(附源码)
- jquery实现"跳到底部","回到顶部"效果