Heim > Artikel > Web-Frontend > jquery implementiert Sina Weibo-ähnlichen Popup-Layer-Code mit animierten Effekten (kann geschlossen und gezogen werden)
jquery implementiert Sina Weibo-ähnlichen Popup-Layer-Code mit animierten Effekten (kann geschlossen und gezogen werden)
- PHPznach vorne
- 2016-05-16 15:36:581641Durchsuche
In diesem Artikel wird hauptsächlich der Code von jQuery vorgestellt, der Sina Weibo mit animierten Effekten imitiert. Er verfügt über die Funktionen zum Schließen und Ziehen. Er umfasst die Reaktion von jQuery auf Mausereignisse und die Transformationsfunktion von Seitenelementattributen. Es hat einen bestimmten Referenzwert. Als Referenzwert können Freunde, die es benötigen, darauf verweisen. Die Details lauten wie folgt:
Dies ist eine JQuery-Implementierung einer Popup-Ebene mit Animation. Sie wurde ursprünglich entwickelt, um die zu simulieren Später wurde jQuery eingeführt, und ich wollte eine Weile nachdenken, aber ich wusste nicht, wie man einen Animationseffekt hinzufügt, und schrieb dann einen solchen Popup-Webseitenebeneneffekt. Nachdem Sie auf die Schaltfläche geklickt haben, wird eine Popup-Ebene angezeigt, die nach und nach erscheint und geschlossen werden kann. Nach dem Klicken zum Schließen wird sie natürlich auch nach und nach ausgeblendet. Beim Verschieben wird die absolute Position der oberen linken Ecke angezeigt wird basierend auf der Mausposition berechnet. Nach dem Loslassen der Maus stoppt die Bewegung und kehrt zur Deckkraft zurück.
Ein Screenshot des Laufeffekts lautet wie folgt:
Die Online-Demo-Adresse lautet wie folgt:
http: //demo.jb51.net/ js/2015/jquery-f-sina-flash-style-close-able-dlg-demo/
Der spezifische Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
#t{ margin:30px 0 0 100px;}
.cc {
border:1px solid #000;
position:absolute;
top:60px;
left:180px;
height: 150px;
width: 300px;
display:none;
}
.cc h2{ display:block; width:270px; font-size:12px; float:left; text-align:center;}
.cc span{ display:block; width:20px; height:20px; font-size:18px; float:right; border:1px solid #F00; background:#999; text-align:center;}
</style>
<script language="javascript">
$(function(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$('#t').click(
function(){
$('.cc').fadeIn('slow');
});
$('.cc span').click(function(){
$('.cc').hide('fast');
})
$('.cc').mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($(".cc").css("left"));
_y=e.pageY-parseInt($(".cc").css("top"));
$(".cc").fadeTo(20, 0.5).css('cursor','move');//点击后开始拖动并透明显示
});
$('.cc').mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
$(".cc").css({top:y,left:x});//控件新位置
}
}).mouseup(function(){
_move=false;
$(".cc").fadeTo("fast", 1).css('cursor','auto');//松开鼠标后停止移动并恢复成不透明
});
});
</script>
<title>新浪微博的弹出层效果</title>
</head>
<body>
<input id="t" name="1" type="button" value="弹出层" />
<p class="cc"><h2>点击可以拖拽哦</h2><span>X</span></p>
</body>
</html>Das Obige ist der gesamte Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter jQuery-Video-Tutorial!