仿小米明星产品展示

最新推荐文章于 2023-03-26 19:12:33 发布
最新推荐文章于 2023-03-26 19:12:33 发布
阅读量1.1k 收藏
点赞数 1
文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32207471/article/details/51175075
版权

今天练习html+css+js

下面是baron_move.js 运动函数

function css(obj, attr, value)
{
	if(arguments.length==2)
		return parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
	else if(arguments.length==3)
		switch(attr)
		{
			case 'width':
			case 'height':
			case 'paddingLeft':
			case 'paddingTop':
			case 'paddingRight':
			case 'paddingBottom':
				value=Math.max(value,0);//宽度不能为负
			case 'left':
			case 'top':
			case 'marginLeft':
			case 'marginTop':
			case 'marginRight':
			case 'marginBottom':
				obj.style[attr]=value+'px';
				break;
			case 'opacity':                   //透明度兼容性设置
				obj.style.filter="alpha(opacity:"+value*100+")";
				obj.style.opacity=value;
				break;
			default:
				obj.style[attr]=value;
		}
	
	return function (attr_in, value_in){css(obj, attr_in, value_in)};
}

var BARON_MOVE_TYPE={   //运动的类型选择,这里有两种方式
	BUFFER: 1,
	FLEX: 2
};

function baronStartMove(obj, oTarget, iType, fnCallBack, fnDuring)
{
	var fnMove=null;
	if(obj.timer)
	{
		clearInterval(obj.timer);
	}
	
	switch(iType)   //选择运动方式
	{
		case BARON_MOVE_TYPE.BUFFER:
			fnMove=baronDoMoveBuffer;
			break;
		case BARON_MOVE_TYPE.FLEX:
			fnMove=baronDoMoveFlex;
			break;
	}
	
	obj.timer=setInterval(function (){
		fnMove(obj, oTarget, fnCallBack, fnDuring);
	}, 15);
}

function baronDoMoveBuffer(obj, oTarget, fnCallBack, fnDuring)
{
	var bStop=true;
	var attr='';
	var speed=0;
	var cur=0;
	
	for(attr in oTarget)
	{
		cur=css(obj, attr);
		if(oTarget[attr]!=cur)
		{
			bStop=false;
			
			speed=(oTarget[attr]-cur)/5;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			
			css(obj, attr, cur+speed);
		}
	}
	
	if(fnDuring)fnDuring.call(obj);
	
	if(bStop)
	{
		clearInterval(obj.timer);
		obj.timer=null;
		
		if(fnCallBack)fnCallBack.call(obj);
	}
}

function baronDoMoveFlex(obj, oTarget, fnCallBack, fnDuring)
{
	var bStop=true;
	var attr='';
	var speed=0;
	var cur=0;
	
	for(attr in oTarget)
	{
		if(!obj.oSpeed)obj.oSpeed={};
		if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
		cur=css(obj, attr);
		if(Math.abs(oTarget[attr]-cur)>1 || Math.abs(obj.oSpeed[attr])>1)
		{
			bStop=false;
			
			obj.oSpeed[attr]+=(oTarget[attr]-cur)/5;
			obj.oSpeed[attr]*=0.7;
			var maxSpeed=65;
			if(Math.abs(obj.oSpeed[attr])>maxSpeed)
			{
				obj.oSpeed[attr]=obj.oSpeed[attr]>0?maxSpeed:-maxSpeed;
			}
			
			css(obj, attr, cur+obj.oSpeed[attr]);
		}
	}
	
	if(fnDuring)fnDuring.call(obj);
	
	if(bStop)
	{
		clearInterval(obj.timer);
		obj.timer=null;
		if(fnCallBack)fnCallBack.call(obj);
	}
}
 下面是正文,其中还有js是因为上面的代码可以重用,所以提取出来,记得有位牛人说过,重复两次以上的代码就要考虑提取出来了.重复写同样的代码并没有什么提高. 



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}            //布局必须要清除这个
body{background:#EBEBED;_position:relative;_height:100%;} //常规设置
img{border:none;display:block;}
li{list-style:none;}   //这里我尝试过只要前一句就可以清除点号,求大神解答
.page{
	-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; //兼容性设置
	-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
	box-shadow: rgba(0,0,0,0.3) 0 1px 3px; 
	background:#FFFFFF;
	border-color: #E5E5E5 #DBDBDB #D2D2D2;
	border-style: solid;
	border-width: 1px;
	margin:5px auto 0;
	width:980px;
}
.baron_box{
	overflow: hidden;
	position: relative;  //今晚复习了position的用法,relative:脱离正常的文本流,但在文本流中位置依然存在.
	width: 820px;
	z-index: 0;
	height:185px;
	margin: 0 70px;
}
.baron_box_head{
	width: 1680px;	
}
.baron_box_head li{
	width:135px; 
	float:left;
	text-align: center;
}
a{
	text-decoration:none;
	font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
	color:#7F7F7F;
}
.baron_box_head li a:hover{color:#333;}
.baron_box_foot{
	height:30px; 
	text-align:center; 
	background:#fff; 
	overflow:hidden;
	background:url(img/nav_bg.png) no-repeat 0 0;
	background:-moz-linear-gradient(center bottom, rgba(223,223,223,1) 0%, rgba(242,242,242,1) 66%, rgba(242,242,242,1) 90%, rgba(230,230,230,1) 93%, rgba(190,190,190,1) 96%, rgba(150,150,150,1) 100%);
	background:-webkit-gradient(linear, left bottom, left top, from(rgba(223,223,223,1)), color-stop(66%, rgba(242,242,242,1)), color-stop(90%, rgba(242,242,242,1)), color-stop(93%, rgba(230,230,230,1)), color-stop(96%, rgba(210,210,210,1)), to(rgba(140,140,140,1)));
	border-bottom:1px solid #ebebeb;
	position:relative;
}
.caret{
	background: url(img/caret_active.gif) no-repeat scroll 0 0;
    display: block;
    height: 8px;
    margin: 0 0 -8px -7px;
    position: absolute;
    width: 15px;
}
.baron_box_foot a{
 	display: inline-block;
    margin: 0 15px;
    padding: 8px 0 6px;
	cursor:pointer;
    text-shadow: 0 1px 0 #FFFFFF;
}
.baron_box_foot .show{
    cursor: default;
    color:#2B2B2B;	
}
.baron_box_foot a:hover{color:#000;}
.baron{height:36px;line-height:26px;text-align:center;position:fixed;_position:absolute;bottom:0;width:100%;}
.baron a{color:#777;font-size:16px;}

.baron a:hover{color:#555;}
.baron_head{height:36px;width:980px;overflow:hidden;margin:0 auto;}
.baron_head .left{float:left;}
.baron_head .right{float:right;}
.baron_head a{line-height:36px;color:#777;}
.baron_head a:hover{color:#555;}
</style>
<script type="text/javascript" src="js/baron_move.js"></script>
<script type="text/javascript">
function getByClass(oParent, sClass)  /这个是获取元素的通用方法,将取得的元素push到数组中
{
	var aEle=oParent.getElementsByTagName('*');
	var aResult=[];
	var i=0;
	
	for(i=0;i<aEle.length;i++)
	{
		if(aEle[i].className==sClass)
		{
			aResult.push(aEle[i]);
		}
	}
	
	return aResult;
}

window.οnlοad=function ()
{
	var oDiv=document.getElementById('div1');
	var aLi=getByClass(oDiv, 'baron_box_head')[0].getElementsByTagName('li');
	var aBtn=getByClass(oDiv, 'baron_box_foot')[0].getElementsByTagName('a');
	var oCaret=getByClass(oDiv, 'caret')[0];
	var aPos=[];
	var timer=null;
	var i=0;
	
	for(i=0;i<aLi.length;i++)   //<span style="font-family: Arial, Helvetica, sans-serif;">这里的for不能合并为一个,如果合并为一个,那么当第一个定位变为absolute之后,</span>
<span style="white-space:pre">				</span>    //下一个块元素就会提升到原来第一个的位置,当for循结束之后,会看见所有块元素都在第一个块严肃的位置
<span style="white-space:pre">			</span>            // absolute:完全脱离文本流,正常的位置不存在
<span style="white-space:pre">				</span>    //这里的两个for是将float的定位批量转化为绝对定位,通用方法

	{
		aLi[i].index=i;
		aPos[i]=aLi[i].offsetLeft;
	}
	
	for(i=0;i<aLi.length;i++)
	{
		aLi[i].style.position='absolute';
		aLi[i].style.left=aPos[i]+'px';
	}
	
	aBtn[0].οnclick=function ()
	{
		var i=aLi.length-1;
		
		clearTimeout(timer);
		
		function next()
		{
			var obj=aLi[i];
			if(i>=aLi.length/2)
			{
				baronStartMove(aLi[i], {left: 900}, BARON_MOVE_TYPE.FLEX);
				timer=setTimeout(next, 100);
				i--;
			}
			else
			{
				timer=setTimeout(next2, 150);
			}
		}
		
		function next2()
		{
			if(i>=0)
			{
				baronStartMove(aLi[i], {left: aPos[i]}, BARON_MOVE_TYPE.FLEX);
				timer=setTimeout(next2, 100);
			}
			i--;
		}
		
		next();
		
		aBtn[1].className='';
		this.className='show';
		baronStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, BARON_MOVE_TYPE.BUFFER);
	};
	
	aBtn[1].οnclick=function ()
	{
		var i=0;
		
		clearTimeout(timer);
		
		function next()
		{
			var obj=aLi[i];
			if(i<aLi.length/2)
			{
				baronStartMove(aLi[i], {left: -200}, BARON_MOVE_TYPE.FLEX);
				timer=setTimeout(next, 100);
				i++;
			}
			else if(i==aLi.length/2)
			{
				timer=setTimeout(next2, 150);
			}
		}
		
		function next2()
		{
			if(i<aLi.length)
			{
				baronStartMove(aLi[i], {left: aPos[i-aLi.length/2]}, BARON_MOVE_TYPE.FLEX);
				timer=setTimeout(next2, 100);
			}
			i++;
		}
		
		next();
		
		aBtn[0].className='';
		this.className='show';
		baronStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, BARON_MOVE_TYPE.BUFFER);
	};
};
</script>
</head>

<body>
<div class='baron_head'>
	<a href="http://www.mi.com" target="_blank" class='left'>小米官网　http://www.mi.com</a>
	<a href="http://www.mi.com/contact.html.php" target="_blank" class='right'>联系我们</a>
</div>
<div id="div1" class="page">
	<div class="baron_box">
			<ul class="baron_box_head">
				<li><a href="http://www.mi.com"><img src="img/1.jpg" alt=""/>小米手机4c</a></li>
				<li><a href="http://www.mi.com"><img src="img/2.jpg" alt=""/>小米手机4</a></li>
				<li><a href="http://www.mi.com"><img src="img/3.jpg" alt=""/>小米盒子3 增强版</a></li>
				<li><a href="http://www.mi.com"><img src="img/4.jpg" alt=""/>小米活塞耳机 基础版</a></li>
				<li><a href="http://www.mi.com"><img src="img/5.jpg" alt=""/>移动电源10000mAh</a></li>
				<li><a href="http://www.mi.com"><img src="img/6.jpg" alt=""/>小米路由器 青春版</a></li>
				<li><a href="http://www.mi.com"><img src="img/7.jpg" alt=""/>小蚁摄像机</a></li>
				<li><a href="http://www.mi.com"><img src="img/8.jpg" alt=""/>小蚁摄像机 夜视版</a></li>
				<li><a href="http://www.mi.com"><img src="img/9.jpg" alt=""/>小米插线板</a></li>
				<li><a href="http://www.mi.com"><img src="img/10.jpg" alt=""/>小米手环</a></li>
				<li><a href="http://www.mi.com"><img src="img/11.jpg" alt=""/>小米体重秤</a></li>
				<li><a href="http://www.mi.com"><img src="img/12.jpg" alt=""/>小米路由器</a></li>
			</ul>
	</div>
	<div class="baron_box_foot">
		<span style="left:460px;" class="caret"></span>
		<a class="show">小米明星产品</a> 
		<a>更多</a>
	</div>
</div>
<h2 class="baron"><a href="http://www.mi.com" target="_blank">小米官网　http://www.mi.com</a></h2>

</body>
</html>



Baron_dream
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
用HTML+CSS完成的小米商城界面
11-23
用HTML+CSS完成的小米商城界面，用DIV+CSS搭好框架，JS写好输入框事件。内附有字体和图片
html+css---仿小米商品展示+拓展
javasvince的博客
04-07 7346
html+css—仿小米商品展示 界面和实现功能 hover后： 功能的话：就是hover之后显示 用到的知识点 transform （2D/3D转换）和 transition (过渡) transform的 translate（平移属性） 用法：transform:translate(10px,10px); //向 右 向 下 为正 //transform有其他属性 http://ww...
CSS+HTML 小米商品展示代码
xielong8866的博客
03-26 597
另外阴影方面利用了阴影滤镜：filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, .2));对前端制作感兴趣的小伙伴，喜欢漂亮网页的小伙伴可以继续关注我更新的博客噢^_^~~~~~!这段代码中，折页的做法需要进行考虑，用到了border的transparent属性。来一起看一下效果，走着~！
仿小米手机官网-html页面实现
02-18
仿小米手机商城的全套页面。包含首页,订单页,列表页,商品详情页,个人中心,购物车,等等几十个页面。 有轮播的实现，demo 基于html css 实现小米官网部分内容搭建。基本功能都实现了
小米静态官网首页展示
03-01
静态小米官方首页，导航部分，轮播图，以及各式各样的列表。新手一枚，有需要的可以参考一下，不过写的比较烂，
仿小米网站
08-27
- 载入和处理JSON数据，用于产品列表、新闻更新等实时信息展示。 - 实现Ajax异步请求，无刷新加载更多内容，提升用户体验。 - 事件监听和处理，如点击事件、滚动事件等，用于实现特定功能。 4. 前端框架与库： ...
仿小米商城html网页源码
03-31
在仿小米商城的项目中，CSS被用来定制字体、颜色、布局、响应式设计等视觉元素。通过选择器如类选择器（`.class`）、ID选择器（`#id`）、元素选择器（`element`）等，可以精确地定位到HTML元素并应用样式。同时，...
仿小米商城网页版（全套）
09-28
【仿小米商城网页版（全套）】项目是一个全面复刻小米商城在线购物平台的Web应用。这个项目旨在提供一个与小米商城类似的功能齐全、用户体验优良的网页版本，涵盖了多个核心功能模块，包括首页、订单管理、商品列表...
2022最新仿小米商城首页html+css+js
09-22
在仿小米商城首页的HTML代码中，我们可能看到如导航栏、轮播图（banner）、产品展示区域等常见电商页面元素的结构定义。这些元素通过不同的HTML标签进行区分，如`<header>`、`<nav>`、`<section>`、`<article>`、`...
mi_java_仿小米桌面_android_
10-01
在Android开发领域，"mi_java_仿小米桌面_android_"是一个项目标题，暗示着开发者尝试创建一个类似小米手机桌面的悬浮菜单功能。这个项目基于Java语言，遵循Android平台的开发规范，旨在提供与小米桌面相似的用户...
商城商品列表展示的完整代码
02-21
、初始化表格请求的url：/item/list 2、Datagrid默认请求参数： 1、page：当前的页码，从1开始。 2、rows：每页显示的记录数。 3、响应的数据：json数据。EasyUIDataGridResult
小米商城页面
02-20
小米商城主页面的
Qt常用QSS集合
m0_60259116的博客
01-10 670
Qt常用QSS集合
仿小米商品展示
qq_27632117的博客
09-28 1054
<!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-Ty
小米商品栏HTML,11.仿小米商品展示效果
weixin_42717586的博客
06-09 400
*{padding: 0;margin: 0;}#mi{width: 234px;height: 300px;border: 1px solid black;margin: 30px auto;position: relative;overflow: hidden;}#mi .bot{width: 234px;height: 76px;background: #FF6700;position: a...
RGBA
u010080803的博客
02-18 858
RGBA是一种可以设置颜色值和透明度的CSS颜色   下面是用rgba() 设置50%透明度的白色.   p {   color: rgba(255, 255, 255, 0.5); } RGBA是RGB色彩模型的一个扩展。这个缩写词代表红绿蓝三原色的首字母，Alpha值代表颜色的透明度/不透明度。   RGBA语法   RGBA色彩表示法的格式为：   rgba
苹果官网产品展示特效
越陌度阡
08-10 2003
给大家分享一个由原生JS实现的苹果官网产品展示特效，看起来很不错，效果如下： 以下是代码实现，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t............
仿照（小米官网首页轮播图）特效js代码
且听风吟
11-26 6866
最近跟轮播图杠上了，以前也接触过这个轮播图的写法，但是一般都是用插件，久而久之就忘记了！昨晚有学习了一下自己写这个js，虽然是依靠零散的记忆写出来的，可能自己并未真正理解吧！！！以下是我写的代码： 小米官网轮播图仿照 .container{width: 1226px;height: 460px;margin:0 auto;position: relative;} .conta
Html——小米商城网页实战（一）
weixin_42511413的博客
10-21 9679
适合新手的小米商城的纯html网页项目 小米官网：https://www.mi.com/?masid=2701.0103 官网效果图如下： 本文针对于上手前端的新手小白，仅供参考。在看到小米官网之后，如何模拟出官网的效果是我们第一步要思考的问题，那么学过了网页布局之后，我们将整个网页分为以下的几个部分：最上面的标题栏、导航栏、内容区、四个分栏的展示区以及最下面的新品展示区。本文完成第一部分内容——标题栏。 可以很清晰的看出，最上面的标题栏分为左右两部分。 剖析：标题栏中存在的难点是下载app和购物车两个标
discuz 仿小米论坛
最新发布
01-27
在功能上，仿小米论坛也加入了小米官方论坛的一些特色功能，比如用户可以轻松查看小米产品的最新资讯和讨论，发布和交流使用心得，互相帮助解决问题。同时，论坛还设置了积分和等级制度，鼓励用户参与讨论和分享。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值