图片翻转菜单技术研究

2024-10-05 08:30:25

Fastcompany是simplebits.com站长的全CSS+Div布局作品.

网站导航采用的是CSS图片翻转.不用多想肯定是利用a:link和a:hover等不同状态下利用显示不同的background-images制作而成.我认为作者的独到之处在于CSS中的a:hover...

#nav a:hover {background-position: 0 -20px;}
#nav a:active {background-position: 0 -40px;}

导航的背景图片在a:link和a:hover,a:active的三种状态下不是三张而是用了同一张图片~通过css对背景纵向定位使得按钮改变.这样做省去了对每个按钮背景图片的单个定义,节省了大量代码,图片变少了,下载起来更快,更易管理.

按钮中不单单是一个背景图片,里面也有导航文字.

用css将文字隐藏

#nav a {padding: 20px 0 0 0;overflow: hidden;}

既然隐藏了为什么还要写文字呢?目的在于当使用纯文本浏览器(或不引用任何CSS时)也能够看到导航链接.

linux mount命令的用法详细解析

挂接命令(mount)首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用到的.命令格式:mount [-t vfstype] [-o options] device dir其中: 1.-t vfstype 指定文件系统的类型,通常不必指定.mount 会自动选择正确的类型.常用类型有:光盘或光盘镜像:iso9660DOS fat16文件系统:msdosWindows 9x fat32文件系统:vfatWindows NT ntfs文件系统:ntf
图片翻转菜单技术研究

Fastcompany是simplebits.com站长的全CSS+Div布局作品. 网站导航采用的是CSS图片翻转.不用多想肯定是利用a:link和a:hover等不同状态下利用显示不同的background-images制作而成.我认为作者的独到之处在于CSS中的a:hover... #nav a:hover {background-position: 0 -20px;}#nav a:active {background-position: 0 -40px;} 导航的背景图片在a:link和
CSS图片翻转菜单

如果用传统的方法制作这个翻转菜单,至少需要把图片切成10椋挂由螶S代码,在图片按钮上再加行为,现在完全用CSS来实现,图片只要一张,见下图. CSS代码: #imgmenu{ width: 450px; height: 25px; /*高度是背景图片的一半*/ background: url(../images/navbg.gif); list-style-type: none; padding: 0px; margin: 0px; } #imgmenu li{ float: left; }
JavaScript实现简单图片翻转的方法

本文实例讲述了JavaScript实现简单图片翻转的方法.分享给大家供大家参考.具体如下: 这里先取两个命名smirk1.jpg和smirk2.jpg同样大小的图像然后运行下面的代码,可以实现简单的图片翻转 <script type="text/javascript"> var revert = new Array(); var inames = new Array('smirk'); // Preload if (document.images) { var flipp
PHP图片处理之图片旋转和图片翻转实例

图片的旋转和翻转也是Web项目中比较常见的功能,但这是两个不同的概念,图片的旋转是按特定的角度来转动图片,而图片的翻转则是将图片的内容按特定的方向对调.图片翻转需要自己编写函数来实现,而旋转图片则可以直接借助GD库中提供的imagerotate()函数完成.该函数的原型如下所示: 复制代码代码如下: resource imagerotate(resource src_im , float angle, int bgd_color [,int ignore_transpatr
JQuery学习笔记实现图片翻转效果和TAB标签切换效果第1/2页

所以自己也下了一个来学习,把之前写的几个JS代码都转换成JQuery,既能保证代码的清晰,也保证了代码的通用性,真是一举两得啊,由于是初学者,所以代码有许多的不足,还请大家多多指正:)1.实现图片翻转效果,DW本身提供了这个功能,不过还是自己写的好用,呵呵.之前写的方式比较麻烦,代码也比较乱,用JQuery改造后可以使其更加清晰,核心代码如下: JS代码复制代码代码如下: <script type="text/javascript"> <!-- $(documen
图片翻转效果具体实现代码

以下为程序代码: 复制代码代码如下: <!DOCTYPE html /> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
微信小程序实现图片翻转效果的实例代码

老规矩,先上图: 页面: <view class='rotateCtn' bindtap='rotateFn'>  <view class='frame {{class1}}'> <image src="{{vo.cover1}}"></image> </view>  <view class='frame {{class2}}'> <im
iOS中5种图片缩略技术及性能的深入探讨

前言图像是每个应用程序不可缺少的一部分.调整图像大小是所有开发人员经常遇到的问题.iOS有5中图片缩略技术,但是我们应该在项目中选择哪种技术呢?尤其是面对高精度图片的缩略时,方式不当可能会出现OOM.现在我们开始一一去看看这5中图片缩略技术吧,完整代码在这里ImageResizing (本地下载). UIKit UIGraphicsBeginImageContextWithOptions & UIImage -drawInRect: 用于图像大小调整的最高级API可以在UIKit框架中找到.给
使用Python开发个京东上抢口罩的小实例（仅作技术研究学习使用）

全国抗"疫"这么久终于见到曙光,在家待了将近一个月,现在终于可以去上班了,可是却发现出门必备的口罩却一直买不到.最近看到京东上每天都会有口罩的秒杀活动,试了几次却怎么也抢不到,到了抢购的时间,浏览器的页面根本就刷新不出来,等刷出来秒杀也结束了.现在每天只放出一万个,却有几百万人在抢,很想知道别人是怎么抢到的,于是就在网上找了大神公开出来的抢购代码.看了下代码并不复杂,现在我们就报着学习的态度一起看看. 使用模块 requests:类似 urllib,主要用于向网站发送 HTTP 请求.
Java实现图片翻转以及任意角度旋转

最近几天在做一个项目,因为涉及到了图片(绝大部分都不是整图,是把一张张的大图切成小图,也就是Title)的翻转以及90°旋转,弄得焦头烂额.在网上搜索好几天,发现用到的方法都是比较公式化的,对于只是在绘图的时候需要显示翻转而不需要另外生成图片的情况,这些代码用起来非常的麻烦.最后仔细的研究了一下JDK文档,用Graphics2D很简单的就实现了以下功能: 1.图片的翻转,包括水平翻转以及垂直翻转 2.图片的任意角度旋转.因为工程需要,代码里面都直接写成了+90,根据需要,可以对这个值进行改动,以

图片翻转菜单技术研究

相关推荐

随机推荐