基于jquery实现性感女性图片广告特效



41 160 54



特效描述:基于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

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