JQuery鼠标经过弹出文本框的效果

最新推荐文章于 2022-05-03 19:44:52 发布

lidanrui521

最新推荐文章于 2022-05-03 19:44:52 发布

阅读量366

点赞数

分类专栏： js 文章标签： javascript ViewUI

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

鼠标滑到游您公众微信的时候弹出的小框，先上效果

css，主要是框的

.footer .helps dd.weixin  strong{ font-size:14px;}
.footer .helps dd.weixin  strong,
.footer .helps dd.weixin span{ display:block; line-height:24px; text-align:center;}
.footer .helps dd em {
	background:#fff;
	width: 190px;
	height: auto;
	border:1px solid #e1e1e1;
	position: absolute;
	right:150px;
	top: -110px;
	text-align: center;
	padding: 15px 12px 10px;
	font-style: normal;
	z-index: 2;
	display: none;
}

html

<dl class="helps">
			<dt>关注游您</dt>
			<dd><a rel="nofollow" href="http://weibo.com/u/5380161043#_loginLayer_1418003989592"><img src="/img/www/sina.png"/>&nbsp;游您新浪微博</a></dd>
			<dd><a rel="nofollow" href="http://t.qq.com/YNSY2015?preview"><img src="/img/www/tencent.png"/>&nbsp;游您腾讯微博</a></dd>
			<dd class="weixin">
				<a rel="nofollow" ><img src="/img/www/weixin.png"/>&nbsp;游您公众微信</a>
				<em><img src="/img/www/erweima.jpg" align="加游您所愿为微信好友吧!" height="180" width="180"> <strong>加游您所愿为微信好友吧!</strong> <span>扫描二维码</span> </em>
				
			</dd>
		</dl>

js处理

<script type="text/javascript">
$(document).ready(function(){
    $(".helps dd:first").find("em").stop('true','true').animate({opacity: "show", top: "-150"}, "slow");
	$(".helps dd").hover(function() {
		$(this).find("em").stop('true','true').animate({opacity: "show", top: "-150"}, "slow");
	}, function() {
		$(this).find("em").stop('true','true').animate({opacity: "hide", top: "-85"}, "fast");
	});
});

</script>

一个类似的可以参考http://bbs.blueidea.com/thread-3048533-1-1.html