原生js代碼制作右側漂浮的js商品對比效果



132 526 176



特效描述:右側漂浮 商品對比效果,漂亮實用的商品對比效果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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表