位置：首页>> 网络编程>> JavaScript>> js图片水平翻转后垂直翻反转的特效代码

js图片水平翻转后垂直翻反转的特效代码

　　发布时间：2009-03-06 15:33:00　

标签：翻转,图片,特效,JavaScript

JavaScript图片水平翻转后垂直翻反转的特效一：

<SCRIPT language="JavaScript" type="text/javascript">var wdmax=120; var wdmin=0; var inc=5; var rate = 50; var pause = 1000; var ff="flip"; function flipflop() {if (ff=="flip") {var wd = pic.width;wd = wd - inc;pic.width=wd;if (wd==wdmin) {pic.src="https://www.aspxhome.com/images/logo.gif"; inc=-inc;}if (wd==wdmax) {ff="flop";inc=-inc;setTimeout("flipflop()",pause);}else {setTimeout("flipflop()",rate);}}else {var ht = pic.height;ht = ht - inc;pic.height=ht;if (ht==wdmin) {pic.src="https://www.aspxhome.com/images/logo.gif"; inc=-inc;} if (ht==wdmax) {ff="flip";inc=-inc;setTimeout("flipflop()",pause);}else {setTimeout("flipflop()",rate);}}}--></SCRIPT><center><body onLoad="javascript:flipflop()"><TABLE border="0"><th width="160" height="160"><IMG src="https://www.aspxhome.com/images/logo.gif" width="120" height="120" ID="pic"></th></TABLE>

翻转特效二：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> body img{border:3 gold ridge} </style> //给图片加上边框的CS代码 <title>用Javascript使网页图片产生旋转效果</title> <script language="javascript"> var i=0; 　function playImg() 　{ image.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")"; i++; if (i>4) {i=1}; 　 mytimeout=setTimeout("playImg()",1500); 　 } </script> //以上是使图片实现四个方向转换的代码 </head> <body bgcolor="#FFFFFF" text="#000000" onload="playImg()"> //修改body为加载就显示效果 <img src="https://www.aspxhome.com/images/logo.gif" width="120" height="120" name="image"> </body> </body> </html>

翻转特效三，手动翻转图片效果源码：

<script language="javascript"> var num=0; function show(){ num=(num==3)?0:++num document.getElementById("img1").style.filter = "progid:DXImageTransform.Microsoft.BasicImage(Rotation=" + num + ")"; } </script> <body><img name="img1" src="https://www.aspxhome.com/images/logo.gif"> <input type="button" value="90×ª" onclick="show()"> </body>

0

投稿

猜你喜欢

用不着妄自菲薄对ASP和ASP程序员的一些话
这段时间，关于asp的前途，关于asp的好坏的讨论贴，都有好些了。当然，大家的心都是好的，但是一些朋友说的话，真是让人郁闷。个人觉得，在现在
Oracle时间日期操作方法小结
sysdate+(5/24/60/60) 在系统时间基础上延迟5秒 sysdate+5/24/60 在系统时间基础上延迟5分钟 sysdat
IE7的web标准之道 Ⅱ
上文：《IE7的web标准之道——1：前言（兼目录）》IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者
如何把图片上传到数据库中并显示出来？
好了，看看我们的代码吧：upload.htm' 上传页面<html> <body>&nb
ie7.0浏览器兼容问题苦煞网站设计者
内容摘要：浏览器不兼容这个难题，一直是网页设计师们头痛的事情。ie7.0的面世，尚且不论他是否较之ie6.0进步， ie7和ie6
利用ASP在线维护数据库
随着因特网的发展，在网络环境中，数据库应用渐渐向操作简单、功能实用的方向发展。本文介绍如何利用ASP技术实现对数据库进行在线维护的方法,并给
全局字体最佳实践
body {font-family: Arial, sans-serif; }这是我迄今
浅析CMS生成静态页面的两种方案
目前市面上成熟的CMS产品有很多，无外乎两种解决方案：第一种就是用XSL+XML的方式来实现客户端具体数据；第二种是生成HTML或者SHTM
简单的ASP生成HTML并分页程序
<％If(Request.QueryString("Page")="") ThenPage=1
Oracle捕获问题SQL解决CPU过渡消耗
本文通过实际业务系统中调整的一个案例，试图给出一个常见CPU消耗问题的一个诊断方法.大多数情况下，系统的性能问题都是由不良SQL代码引起的，
5个常见的XHTML验证错误
负责Web编写的前端人员，都清楚可以通过W3验证服务功能，来在线验证自己编写的XHTML代码是否正确，在验证期间，最容易出现的错误往往都是在
FrontPage2002简明教程三：网页布局
阅读系列教程上一篇：FrontPage2002简明教程二：文字与图像的处理通常网页的布局使用到的是FrontPage 2002中的表格和框架
改进评论提交表单
Dmitry这篇设计评论表单很有启发意义，尤其提到关键的评论内容、评论者信息录入顺序问题。好比我们在日常沟通时，对信息的反馈都是第一诉求，写
解决IIS出现Active Server Pages错误“ASP 0201”
win2000注册表程序 regedt32.exe下面是解决IIS出现Active Server Pages错误&
做了CDN加速的ASP网站获取用户真实IP程序
代码如下:function checkip(checkstring)'用正则判断IP是否合法 dim re1 set re1=new
asp如何在约定时间显示特定的提示信息？
如何在约定时间显示特定的提示信息？<％Function Greeting()
asp用err.raise自定义错误信息
我想大多数的人在编写ASP程序的时候，都碰到过类似的错误信息： Error Num
ASP实现最简洁的多重查询的解决方案
我们经常会遇到多重查询问题，而长长的SQL语句往往让人丈二和尚摸不着头脑。特别是客户端部分填入查询条件时，如用普通方法将更是难上加难。以下巧
chr()函数参照表 chr13 chr10 chr34
在网站开发的时候经常要用chr(),但本人比较懒没时间记那么多。于是到用到的时候就查，这样麻烦。现在将它写出来方便以后用到查，也方便大家!c
javascript面向对象编程（一）
javascript曾一度被认为是玩具型的语言，因为它太容易上手，而且，javascript曾一度担任为web站点“打杂”的职责。直到Aja

手机版 网络编程 asp之家 www.aspxhome.com