当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS代码实现图片的翻转效果

JS代码实现图片的翻转效果

2012/11/7 18:52:55作者:佚名来源:网络

移动端

【实例名称】

JS代码实现图片的翻转效果

【实例描述】

图片既可以通过滤镜也可以通过Photoshop进行特殊处理。本例介绍如何利用css的filter实现图片翻转。

【实例代码】

<!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>     <title>无标题页-学无忧(www.xue51.com)</title> </head> <body>     <p><font face="Arial" color="#008080">     <div><p align="center">     <img style="filter:flipV" src="logo1.gif" width="160" height="103"> </p>     </div>     </font>     <p align="center">这是图片的翻转效果</p></font> </body> </html>

 

【运行效果】

 图片的翻转效果运行效果

【难点剖析】

本例的重点是CSS滤镜“filter:flipV”。“flipV”表示垂直翻转图片,如果修改为“flipHs”则表示水平翻转图片。

【源码下载】

为了JS代码的准确性,请点击:图片的翻转效果 进行本实例源码下载 

标签: 图片