jQuery選項卡鼠標經過圖片遮罩顯示二維碼代碼



125 496 166



特效描述:選項卡鼠標經過 圖片遮罩顯示 顯示二維碼,jQuery選項卡+鼠標經過圖片遮罩層顯示和二維碼

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<div class="company_con" >
	<ul id="companyUl">
		<li class="selected"><a href="javascript:void(0);">B2B案例</a></li>
		<li><a href="javascript:void(0);">B2C案例</a></li>
	</ul>
	<div id="companyList">
		<div class="company_b2b clearfix">
			<dl class="dl_first">
				<dt class="company_img"><img src="images/B2Blist01.jpg" alt="無錫春秋旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_trip12301.jpg" /></dt>
				<dd>無錫春秋國旅</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist02.jpg" alt="環球風情旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_chujing114.jpg" /></dt>
				<dd>環球風情</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist03.jpg" alt="浙江華夏旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_huaxialvxing.jpg" /></dt>
				<dd>浙江華夏國旅</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist04.jpg" alt="同旅網"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_tonglvw.jpg" /></dt>
				<dd>人民國旅(同旅網)</dd>
			</dl>
			<dl  class="dl_first">
				<dt class="company_img"><img src="images/B2Blist05.jpg" alt="北京青年旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_byts.jpg" /></dt>
				<dd>北京青年旅行社</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist06.jpg" alt="紹興海外旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_hw517.jpg" /></dt>
				<dd>紹興海外國際旅行社</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist07.jpg" alt="南瓜假期"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_cx766.jpg" /></dt>
				<dd>慈溪光大旅行社(南瓜假期)</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist08.jpg" alt="旅游一站式"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_ly124.jpg" /></dt>
				<dd>旅游一站式</dd>
			</dl>
			<dl class="dl_first">
				<dt class="company_img"><img src="images/B2Blist09.jpg" alt="我愛旅游網"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_5i61.jpg" /></dt>
				<dd>我愛旅游網</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist10.jpg" alt="嘉興米蘭"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_jxmlly.jpg" /></dt>
				<dd>妙途旅游(嘉興米蘭)</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist11.jpg" alt="布哥價優站"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_jiayts.jpg" /></dt>
				<dd>布哥價優站</dd>
			</dl>
		</div>
		<div class="company_b2b company_b2c hid">
			<dl class="dl_first">
				<dt class="company_img"><img src="images/B2Clist01.jpg" alt="無錫春秋旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_otchz.jpg" /></dt>
				<dd>杭州海外旅游</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist02.jpg" alt="環球風情旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_ly.57676.jpg" /></dt>
				<dd>浙江運通旅游</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist03.jpg" alt="浙江華夏旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_tzszbb.jpg" /></dt>
				<dd>臺州神州國際旅行社</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist04.jpg" alt="同旅網"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_0575ly.jpg" /></dt>
				<dd>紹興市四海旅游</dd>
			</dl>
			<dl class="dl_first">
				<dt class="company_img"><img src="images/B2Clist05.jpg" alt="無錫春秋旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_yanjiaolvyou.jpg" /></dt>
				<dd>中國鐵道旅游燕郊分社</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist06.jpg" alt="環球風情旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_sxkxgl.jpg" /></dt>
				<dd>凱旋國旅</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist07.jpg" alt="浙江華夏旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_guoxinly.jpg" /></dt>
				<dd>山東國信旅游</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist08.jpg" alt="同旅網"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_ctszj.jpg" /></dt>
				<dd>鎮江中旅</dd>
			</dl>
			<dl class="dl_first">
				<dt class="company_img"><img src="images/B2Clist09.jpg" alt="無錫春秋旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_jrglvip.jpg" /></dt>
				<dd>嘉興市假日國際旅行社</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist10.jpg" alt="藝美旅游網(北京阿里郎)"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_emtrip.jpg" /></dt>
				<dd>藝美旅游網(北京阿里郎)</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist11.jpg" alt="吉林市中國國際旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_cits.jpg" /></dt>
				<dd>吉林市中國國際旅行社</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist12.jpg" alt="大連東方假日國際旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_dldfjr.jpg" /></dt>
				<dd>東方假日國旅</dd>
			</dl>
			<dl class="dl_first">
				<dt class="company_img"><img src="images/B2Clist13.jpg" alt="跟我游天下"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_114lvxing.jpg" /></dt>
				<dd>跟我游</dd>
			</dl>
		</div>
	</div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動星星打分 其他 二維碼 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子