静态网页--自己写着玩的
【前因后果】网页放在自己的vps上，只有一张静态图片。总想着添加的什么，就找了点代码放了进去，依旧简陋。
【实现功能】两个html：index.html和mobile.htmlindex.html负责判断访问来自手机还是电脑，是手机则会跳转到mobile【index.html代码】
mobile.html里的图片添加点击旋转的功能
<!DOCTYPE html>
<html>
<head>
<title>Japan Beautiful Gril</title>
<link href="google.ico" rel="shortcut icon" />
//实现手机端跳转功能
<script language="javascript">
//平台、设备和操作系统
var system ={
win : false,
mac : false,
xll : false
};
//检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
//跳转语句，如果是手机访问就自动跳转到m.yijile.com页面
if(system.win||system.mac||system.xll){
}else{
window.location.href="mobile.html";
}
</script>
</head>
<body>
//实现照片水平翻转
<style>
.flip-x {
filter: FlipH;
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
}
</style>
<table align="center">
//利用表格功能实现照片水平排列
<tr>
<td>
<img src="http://wx2.sinaimg.cn/mw1024/006dAuLSly1fn897vd69vg30i00i01l3.gif" alt="beauty" height="100%" >
</td>
<td>
<img src="http://wx2.sinaimg.cn/mw1024/006dAuLSly1fn897vd69vg30i00i01l3.gif" alt="beauty" height="100%" class="flip-x">
</td>
</tr>
</table>
</body>
</html>
【mobile.html】
<!DOCTYPE html>
<html>
<head>
<title>Japan Beautiful Gril</title>
<link href="google.ico" rel="shortcut icon" />
</head>
<body>
<img src="http://wx2.sinaimg.cn/mw1024/006dAuLSly1fn897vd69vg30i00i01l3.gif" id="beauty" height="100%">
</body>
//点击照片，照片旋转90度
<script type="text/javascript">
var deg = 0;
document.getElementById("beauty").onclick = function () {
deg += 90;
document.getElementById("beauty").style.transform = "rotate(" + deg + "deg)";
}
</script>
</html>
评论
发表评论