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

JavaScript014

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

第一步，创建静态页面vhtml.html，并引入vue.js文件

第二步，在元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令

第三步，绑定v-html指令数据，这里设置为字符串

第四步，Vue.js库的v-html指令是插入html元素，修改datas为包含

标签

第五步，预览该静态页面，这时会看到页面显示为“v-html指令”

第六步，将调试打开，这时发现

中有个

标签，就成功地添加了html元素。

一款JS+html5转盘抽奖代码网页特效，该特效代码基于html5canvas技术实现，点击开始旋转按钮，转盘就会快速旋转，停止旋转后，所在区域就是中奖项目。奖项可以自定义。请用支持HTML5+CSS3主流浏览器预览效果。（兼容测试：FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器）使用方法：1、调用CSS样式：2、添加HTML代码：将之间的html和js代码；放在之间。