如何用CSS+HTML实现图片上下翻转

如何用CSS+HTML实现图片上下翻转,第1张

想要在客户端实现此功能,ie必须得使用fliter。

非ie核心的可以使用canvas

具体参见例子 http://www.ajaxblender.com/article-sources/jquery/image-rotate/index.html

可以用控制div的显现的方式。可以用js。

举个列子

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>div显现与隐藏</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function toggle(targetid){

if (document.getElementById){

target=document.getElementById(targetid)

if (target.style.display=="block"){

target.style.display="none"

} else {

target.style.display="block"

}

}

}

-->

</script>

<style type="text/css">

<!--

#div1{

background-color:#000000

height:400px

width:400px

display:none

}

-->

</style>

</head>

<body>

<input type="button" id="butn" value="显示/隐藏" onclick="toggle('div1')" />

<center>

<div id="div1"></div></center>

</body>

</html>

我把核心给你写好了,剩下的就靠你自己装饰一下了。比如把div夸大到全屏,该div 内容等。。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6198999.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存