原生js代码制作右侧漂浮的js商品对比效果



130 518 173



特效描述:右侧漂浮 商品对比效果,漂亮实用的商品对比效果JS代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

2. 引入JS

<script src="js/dom.js" type="text/javascript"></script>
<script src="js/compare.js" type="text/javascript"></script>

3. HTML代码

<div class="b5" id="bdbb">
	<div class="m2">
		<div class="m2lf"><a href="http://www.dijiuzhanzhang.com/"><img src="images/01.jpg" alt=" 深层净化活力洁面摩丝"/></a></div>
		<div class="m2rg">
			<h3><a href="http://www.dijiuzhanzhang.com/">Neutrogena露得清</a> | <a href="http://www.dijiuzhanzhang.com/">深层净化活力洁面摩丝</a>&nbsp;&nbsp;¥89.00</h3>
			<dl>
				<dt>分类:<a href="http://www.dijiuzhanzhang.com/">洁面</a>&nbsp;&nbsp;&nbsp;评论:<a href="http://www.dijiuzhanzhang.com"><span class="color3">6453</span></a> 条 &nbsp;&nbsp;<span class="color3">15</span>人用过</dt>
				<dd><input type="checkbox" id="a27285" value="深层净化活力洁面摩丝" onclick="dblist(27285,event)" /><label for="a27285">加入对比</label></dd>
			</dl>
			<p>全新推出的露得清深层净化活力洁面摩丝,含有丰富而柔密的泡沫,直接深入毛孔清洁污垢,让肌肤更透亮;独特活力成分帮助唤醒你的肌肤,给你清新......<a href="http://www.dijiuzhanzhang.com/">&gt;&gt;查看详细</a></p>
		</div>
	</div>
	<div class="m2">
		<div class="m2lf"><a href="http://www.dijiuzhanzhang.com"><img src="images/02.jpg" alt=" 深层卸妆油"/></a></div>
		<div class="m2rg">
			<h3><a href="http://www.dijiuzhanzhang.com">DHC蝶翠诗</a> | <a href="http://www.dijiuzhanzhang.com">深层卸妆油</a>&nbsp;&nbsp;¥198.00</h3>
			<dl>
				<dt> 分类:<a href="http://www.dijiuzhanzhang.com">卸妆</a>&nbsp;&nbsp;&nbsp;评论:<a href="http://www.dijiuzhanzhang.com"><span class="color3">4367</span></a> 条 &nbsp;&nbsp;<span class="color3">1487</span>人用过</dt>
				<dd><input type="checkbox" id="a5754" value="深层卸妆油" onclick="dblist(5754,event)" /><label for="a5754">加入对比</label></dd>
			</dl>
			<p>以优质橄榄精华油为主要成分的DHC深层卸妆油虽是油类,但又具有水溶性,可用清水完全洗净,是一种划时代的卸妆品。可迅速溶解难以卸除的彩妆,......<a href="http://www.dijiuzhanzhang.com">&gt;&gt;查看详细</a></p>
		</div>
	</div>
	<div class="m2">
		<div class="m2lf"><a href="http://www.dijiuzhanzhang.com"><img src="images/03.jpg" alt=" 纯榄滋养皂"/></a></div>
		<div class="m2rg">
			<h3><a href="http://www.dijiuzhanzhang.com">DHC蝶翠诗</a> | <a href="http://www.dijiuzhanzhang.com">纯榄滋养皂</a>&nbsp;&nbsp;¥110.00</h3>
			<dl>
				<dt>分类:<a href='http://www.dijiuzhanzhang.com'>洁面</a>&nbsp;&nbsp;&nbsp;评论:<a href="http://www.dijiuzhanzhang.com"><span class="color3">3729</span></a> 条 &nbsp;&nbsp;<span class="color3">1557</span>人用过</dt>
				<dd><input type="checkbox" id="a5755" value="纯榄滋养皂" onclick="dblist(5755,event)" /><label for="a5755">加入对比</label></dd>
			</dl>
			<p>皮肤粗糙、青春痘、暗沉等多半是因面部没有彻底洗净而造成的。DHC纯榄滋养皂是一款内含橄榄精华油和蜂蜜的透明洁面皂。具备能够彻底清除肌肤污......<a href="http://www.dijiuzhanzhang.com">&gt;&gt;查看详细</a></p>
		</div>
	</div>
	<div class="m2">
		<div class="m2lf"><a href="http://www.dijiuzhanzhang.com"><img src="images/01.jpg" alt=" 纯榄滋养皂"/></a></div>
		<div class="m2rg">
			<h3><a href="http://www.dijiuzhanzhang.com">DHC蝶翠诗1</a> | <a href="http://www.dijiuzhanzhang.com">纯榄滋养皂1</a>&nbsp;&nbsp;¥110.00</h3>
			<dl>
				<dt>分类:<a href='http://www.dijiuzhanzhang.com'>洁面</a>&nbsp;&nbsp;&nbsp;评论:<a href="http://www.dijiuzhanzhang.com"><span class="color3">3729</span></a> 条 &nbsp;&nbsp;<span class="color3">1557</span>人用过</dt>
				<dd><input type="checkbox" id="a5757" value="纯榄滋养皂1" onclick="dblist(5757,event)" /><label for="a5757">加入对比</label></dd>
			</dl>
			<p>皮肤粗糙、青春痘、暗沉等多半是因面部没有彻底洗净而造成的。DHC纯榄滋养皂是一款内含橄榄精华油和蜂蜜的透明洁面皂。具备能够彻底清除肌肤污......<a href="http://www.dijiuzhanzhang.com">&gt;&gt;查看详细</a></p>
		</div>
	</div>
</div>
<div id="xsyc"></div>
<div id="bbv">
	<div id="dbimg" onclick="dbhidd()"></div>
	<div id="dbnr">
		<h4><span>妆品对比</span><span class="span2" onclick="dbhidd()"><img src="images/closex.gif" align="absmiddle" />&nbsp;隐藏对比框</span></h4>
		<div id="tishi">对不起,您还没有选择产品</div>
		<ul></ul>
		<div class="pkbut">
			<span><a href="#" onclick="return comparepro();">开始对比</a></span>
			<span onclick="clears()">清&nbsp;空</span>
		</div>
	</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash焦点图 flash幻灯片 flashbanner flash图片轮播 切换按钮 表单 表单美化 表单插件 表单美化插件 焦点图 幻灯片 轮播图 bar焦点图 带简介的焦点图 单选框 单选按钮

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到