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

html-css020

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以下的低版本浏览器，不然你啥都看不见

应该是缓存的问题可以适当清理浏览器缓存，其次我觉得你既然加上了背景就没有必要加颜色了，如果真的没作用建议你换一下图片格式做测试 还有就是<style>里应该加上属性type="text/css" 一下是我的代码请供参考:

<style type="text/css">

    div{

        background: url("easyui/themes/metro-red/images/panel_tools.png")

        background-repeat:no-repeat

        width: 100px

        height: 100px

    }

</style>

</head>

<body>

 <div></div>

</body>

<style>

*{ padding:0margin:0font-size:14px }

.pa{ position:relativewidth:148pxheight:148pxborder:1px solid #cccfloat:leftmargin:10px 0 10px 10px }

.pa img{ width:100% }

.hide-div{ position:absolutewidth:100%height:100%background-color:rgba(0,0,0,.35)left:0top:0display:none }

.pa:hover .hide-div{ display:block }

.hide-div a{ display:blockwidth:50%height:24pxline-height:24pxtext-align:centerbackground-color:#1D82FEcolor:#FFFtext-decoration:noneposition:absolutemargin:autotop:0bottom:0left:0right:0border-radius:12px }

</style>

</head>

<body>

<div class="pa">

<img src="https://img.alicdn.com/imgextra/i2/2344162546/TB2DpUNqYBmpuFjSZFuXXaG_XXa_!!2344162546.jpg"/>

<div class="hide-div">

<a href="#">预览</a>

</div>

</div>

<div class="pa">

<img src="https://img.alicdn.com/imgextra/i4/2344162546/TB2Q4MlqtFopuFjSZFHXXbSlXXa_!!2344162546.jpg"/>

<div class="hide-div">

<a href="#">预览</a>

</div>

</div>

</body>