基于jquery實現性感女性圖片廣告特效



42 166 56



特效描述:基于jquery實現 性感女性 圖片廣告,基于jquery實現性感女性圖片廣告特效

代碼結構

1. 引入JS

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

2. HTML代碼

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
.header{background:url("images/header_bg.jpg") no-repeat top;height:518px;overflow:hidden;}
.center-wrap{margin:0px auto;width:980px;position:relative;}
.animate{top:160px;width:414px;height:310px;right:-64px;position:absolute;cursor:pointer;-moz-user-select:none;}
.animate-active{background:url("images/animate_active.jpg") no-repeat 0px 0px;z-index:100;}
.hand{background:url("images/hand.gif") no-repeat 0px 0px;width:68px;height:85px;right:50px;bottom:0px;position:absolute;z-index:10;}
</style>
<div class="header">
	<div class="center-wrap">
		<div class="animate" id="target" onselectstart="return false;" unselectable="on"><span class="hand" id="hand"></span></div>
	</div>
</div>
<script type="text/javascript">
var hand = $('#hand'), target = $('#target'), downloaded = false;
target.on('click', function(event){
	event.preventDefault();
	target.addClass('animate-active');
	hand.hide();
	setTimeout(function() {
		target.removeClass('animate-active');
		hand.show();
	}, 200);
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


熱門標簽: 加載動畫 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 浮動提示框 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 圖片廣告 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子