jquery click text content to enlarge and center the example sharing

This article mainly introduces jquery to you in detail. Click on text or picture content to enlarge and display it in the center. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The effect we want to achieve is:

Click a small picture and a large picture will be displayed in the center of the page.

The animate animation function is used, and there is a trajectory from the small picture to the large picture, and from the small picture position to the center position.

Supports IE7 and above browsers, Firefox, and Google Chrome.

To get the large picture to be centered, I mainly used the following code:

var width=$('.alert').find('img').width();//大图得宽高 var height=$('.alert').find('img').height(); var lwidth=$(window).width();//屏幕中页面可见区域的宽高 var lheight=$(window).height(); var x2=lwidth/2-width/2+$(window).scrollLeft();//在屏幕居中的坐标 var y2=lheight/2-height/2+$(window).scrollTop();

The width and height of the scroll bar are added here, so that the width and height of the scroll bar can be Even if there is a scroll bar, it will be displayed in the center.

The main code is as follows:

       
  
 
 
 
 
 
 
 
 
 
 
 
 
 关闭 
   

The effect can be copied and viewed on the page.

Related recommendations:

jquery implements clicking to pop up a dialog box that can be enlarged, centered and closed (with demo source code download)_jquery

JS implementation example sharing of image centering and floating effect

CSS image centering method with non-fixed size

The above is the detailed content of jquery click text content to enlarge and center the example sharing. For more information, please follow other related articles on the PHP Chinese website!