仿qq浏览器默认页面的一个小效果_网站常用

内容介绍

兼容没有测，Chrome浏览器是可以的，鼠标放在边缘会有些抖动，知道怎么解决的大神请告诉我下。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box; 
		}
		#main{
			-webkit-transform-style: preserve-3d;
    		-webkit-perspective: 1000px;
			transform-style: preserve-3d;
    		perspective: 1000px;
		}
		#images{
			width: 368px;
			height: 204px;
			margin: 100px auto;
			display: block;
    		-webkit-transition: transform .1s ease;
    		transition: transform .1s ease;
		}
	</style>
</head>
<body>
<div id="main">
	<img src="http://stdl.qq.com/stdl/newtabcms/production/cc5d50efeab0a91ebd7abccd903d8ae9.png" alt="" id="images">
</div>
	
</body>
<script>
	var image=document.getElementById('images'),
	Width=parseInt( getComputedStyle(image,false).width ),
	Height=parseInt( getComputedStyle(image,false).height )
	maxX=20,
	maxY=20;
	image.onmousemove=function(e){
		var x=e.clientX-image.offsetLeft,
		y=e.clientY-image.offsetTop,
		Xnub,
		Ynub;
		if (y>Height/2) {
			Xnub=-maxY*y/Height;
		}else{
			Xnub=maxY*( Height-y )/Height;
		}
		if (x>Width/2) {
			Ynub=maxX*x/Width;
		}else{
			Ynub=-maxX*( Width-x )/Width;
		}
		image.style.webkitTransform='rotateX('+Xnub+'deg) rotateY('+Ynub+'deg) scale(1.1)';
                image.style.transform='rotateX('+Xnub+'deg) rotateY('+Ynub+'deg) scale(1.1)';
		image.onmouseout=function(){
                        image.style.webkitTransform='rotateX(0deg) rotateY(0deg) scale(1)';
			image.style.transform='rotateX(0deg) rotateY(0deg) scale(1)';
			
		}
	}
</script>
</html>

本站所有特效都是站长亲自测试后发布的，如果运行代码无效果，请复制到您的本机运行

运行代码复制代码另存代码[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

全站搜索

仿qq浏览器默认页面的一个小效果

内容介绍

最新推荐

本周排行