Home > Article > Web Front-end > jquery implements Sina Weibo-like pop-up layer code with animated effects (can be closed and dragged)
jquery implements Sina Weibo-like pop-up layer code with animated effects (can be closed and dragged)
- PHPzforward
- 2016-05-16 15:36:581642browse
This article mainly introduces the code of jQuery to implement a pop-up layer imitating Sina Weibo with animated effects. It has the functions of closing and dragging. It involves jQuery's response to mouse events and the transformation function of page element attributes. It has certain reference For reference value, friends who need it can refer to it, the details are as follows:
This is a jquery implementation of a pop-up layer with animation. It was originally designed to simulate the pop-up layer in Sina Weibo. Later, jQuery was introduced, and I wanted to After thinking for a while, I didn’t know how to add some animation effect, and then I wrote such a pop-up web page layer effect. After you click the button, you can see a pop-up layer that gradually emerges and can be closed. After clicking to close, of course, it will also gradually Disappears. When moving, the absolute position of the upper left corner of the control is calculated based on the mouse position. After releasing the mouse, it stops moving and returns to opacity.
A screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/ js/2015/jquery-f-sina-flash-style-close-able-dlg-demo/
The specific code is as follows:
<!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>The above is the entire content of this chapter , for more related tutorials, please visit jQuery Video Tutorial!