网页前端设计

http://www.86y.org

搜索文章

js控制汽车360度图片展示

用声音读出全文关注我吧
 2013/7/18 11:41:44 阅读次数:7976

js控制汽车360度图片展示

这是我在博客园看到的一篇关于JS的图片展示效果确实不错。js控制汽车360度图片展示,等等大家能想到的都可以去发挥。

在这里把代码贴给大家看,希望你能做出更好的效果来。难度不大。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>汽车360度图片展示</title>
	<script id="jquery_183" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
	</head>
	<body>
		<div class="content">
			<img id="car" src="http://sandbox.runjs.cn/uploads/rs/369/vuy2vmwn/car_1.png" />
		</div>
		<div class="tip">
			请按下鼠标左右移动
		</div>
	</body>
</html>
    	<style>html{
	background:#fff;
}
*{
	margin: 0px;
	padding: 0px;
}
.content{
	position: fixed;
	width: 765px;
	height: 313px;
	top: 50%;
	left: 50%;
	margin-left: -382px;
	margin-top: -156px;
}
.tip{
	position:fixed;
	width:200px;
	text-align:center;
	left:50%;
	margin-left:-100px;
	margin-top:20px;
	text-shadow:1px 1px 3px #333;
}</style>
	    		<script>$(document).ready(function () {
	
	var xDown,	//鼠标按下x的值
			i = 1,	
			isDown = false;
	$(window).on('mousedown',function(e){
		e.preventDefault();
		xDown = e.clientX;
		isDown = true;
	}).on('mousemove',function(e){
		e.preventDefault();
		if(isDown){
			//以鼠标移动十五个像素进行换图
			var moved = e.clientX - xDown;
			if (moved > 15) {
				i ++;	
				if(i>36){
					i=1;
				}					
			} else if (moved < -15) {
				i --;
				if(i<1){
					i = 36;
				}
			}else{
				return;
			}
			setImgSrc(i);	
			xDown = e.clientX;	
		}
	}).on('mouseup',function(){
		isDown = false;
	});
	
	function setImgSrc(i) {
		$("#car").attr('src', 'http://sandbox.runjs.cn/uploads/rs/369/vuy2vmwn/car_' + i + '.png');	
	}
	
});</script>

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭