3、javascript+CSS+Html5实现图片预览（本地和网络图片）

html-css023

3、javascript+CSS+Html5实现图片预览（本地和网络图片）,第1张

<!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>

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

<title>Transform</title>

<style type="text/css">

.test-box{

width:600px

margin:50px auto}

.pic{

-webkit-transition:all 1s ease-in-out

transition:all 1s ease-in-out

cursor:pointer}

.top-pic{

position:absolute

transform:scale(0,0)}

.test-box:hover .top-pic{

-webkit-transform-origin:top right

-webkit-transform:scale(1,1)}

.test-box:hover .bot-pic{

-webkit-transform:scale(0,0)

-webkit-transform-origin:bottom left

opacity: .5

-webkit-transform:rotate(120deg)

-webkit-transform-origin:bottom left

}

</style>

</head>

<body>

<div class="test-box">

<img class="pic top-pic" src="test-pic01.jpg" />

<img class="pic bot-pic" src="test-pic02.jpg" />

</div>

</body>

</html>

随便写了几个效果，没有用到JS，不过要用到JS只要把触发事件替换掉上面的hover就行了，比如：

$(".button").click(function () {

。。。

})

这里面用到CSS3，所以请不要用IE11以下的低版本浏览器，不然你啥都看不见

亲，直接打开浏览器查看不就可以了，或者使用DreamWeaver的视图功能，不过很多时候可能不准确，在不同的浏览器下一边编辑html+css+js一边用不同的浏览器打开进行浏览，这是最准确的

这些文件是网站的服务器发送给浏览器的,肯定不会在本地找到,不过有解决方案,如果你用的火狐浏览器并且安装的firebug插件,通过F12,然后找到这些文件的内容复制下来,你自己创建CCS和JS