CSS Example tutorial: Micro-bo new version to see the effect of the large image before and after browsing

Article Introduction: Weibo new version to see the larger picture before and after another implementation of the Browse.

First, Sina Weibo new version view big picture

Do you think I'm going to start with some nonsense or talk nonsense?

Search the "new version of micro-blog View Large map", the results of the first three are as follows:

In fact, this effect, I see in everyone first, and then stick it, and I do not use the QQ space and so on ... According to my previous experience, it is estimated that from the old United States which site copy came over, and then, a red light, b red light, c also red light, at this time D feel that they do not red light is not normal, so also toward the direction of red stride taken away.

Data on the good and bad, I am not professional, casually will rot the tongue. From personal perceptual knowledge, Weibo seems to have an extra piece of jewelry.

Green vegetables radish, complex and rich is also a temperament, there will be people like.

Although the matter does not close already armchair, the micro Bo is dead is the life I wait for a change can, but people in the river in the river, micro-BO products and developers must have the bitterness, even as the following card West anxiety, so, for the new revision, I am a big support, struggling to advance it!

ZXX: See wood, I am not only black slag waves.

The beginning of the nonsense to this, back to their real interest in the technology, big scarf large pictures of large browsing interest before and after browsing (picture left half of the left arrow, right half right arrow, see screenshot below):

After viewing, found (90%+), the shape of the left and right half of the change is through JS to determine the mouse in the left half of the picture or the right-hand half of the implementation, the picture of the vertical and horizontal center is also calculated through JS.

I want to spit these two points:
1. JS judge whether the mouse in the picture left hemisphere or right half of the area, is bound to use MouseMove event, by looking at, ie browser outside the internet does not seem to directly get the mouse relative to the object of the event of the coordinates, therefore, but also an additional calculation, it seems to be compared with the external container size Most of the element dimensions use ClientWidth, redraw the trigger, ... In fact, the performance of that point of difference, let me IE6 under observation, 30 seconds later, finally see the interface, applause!! And then there's this. A sweat Oh ~ ~

But it should be a tribute!

In fact, the performance of the difference for users (especially the IE6 kicked off), far from the 100ms users can not tolerate the time of the meal. Therefore, the realization of the main problem lies in the complexity of the implementation of the brain cells, wasting time, regardless of development and commissioning, so overtime may be unavoidable.

In fact, I think, this feature to achieve the predecessors must know what I want to implement the method (layer overlay), but, for the user's consideration-like the right to save the map, and so on, here use this artwork exposed to the top of the implementation.

2. We all know that CSS can achieve the level of the picture and the center effect, from the return point of view (HTML changes) (opacity transparency changes do not seem to count), where the image using absolute positioning is the right choice; however, considering that itself the entire pop-up layer is fixed position/absolute positioning, The so-called backflow is very limited (reflux and Dom depth relationship greatly), therefore, here the picture absolute positioning, JS calculation margin negative offset in fact, with a pure CSS to achieve horizontal vertical center is inferior.

Two, the new person also can realize the realization method

For many of the front-end to deal with the page, the CSS familiar to be greater than the understanding of JS. Therefore, for most of the peers, an interaction to want to achieve a simple and easy to realize the full potential of css/html, and some of the functions JS hundreds of lines, if your CSS processing is exquisite enough, JS may be a few lines, the results may be even more a chip. Of course, if your CSS is simply to write a page of this half-baked level, most of the above is only a good ideal for you, unless ... You're going to leave a few hands for a surprise comment, or your reading and understanding of the content below is not cover. Not joking, 1.1 of the continuous accumulation of silence, there will always be a qualitative change. ZXX: Yes, can not be too quiet, only the technology is not a good job, not bubble to good sister, the ability to do things with the gab is also very important ~ ~

The judgment of the left and right half of the region we give css/html complete, the principle is as follows, at a glance:

Assuming that the class name of the left overlay is prev, the right overlay is next, and the parent container is position:realtive, considering the height of the parent container or potential dimensional variability later, we want to adapt to the processing, so we have the following CSS code:

. prev,. next{

		/* 50% Adaptive to the parent container * *

     width:50%;

		/* IE6 under top:0; bottom:0 Can not be highly 100% adaptive, using a super height, will always be 100% show the * * *

     _height:2000px;

		/* It is said that the absolute positioning layer of the ie6/ie7 will be hollowed out, using an empty background meaning, make clickable * *

     Background-image:url (About:blank);

     Position:absolute;

		/* ie7+ and other browser height 100% with parent container * *

     top:0; bottom:0; /* Below is the hand type and positioning/Prev{cursor:url (pic_prev.cur), auto; left:0; Next{cursor:url (pic_next.cur), auto; right:0;



The corresponding HTML is actually old and simple, for:



<div class= "box" >                	     

<s class= "prev" title= "Previous" ></s>     

<s class= "Next" title= "Next" ></s> 

The benefits of this implementation in addition to a few performance improvements, save a lot of JS code and brain cells, we can also add title attribute, through dynamic change, tell users whether it is the last picture, to some extent, improve the user experience. However, Kim Pure no one is perfect, this method has a relatively fatal impact of the experience of the place, is that we can not: right-the picture saved as a copy of the picture address ... such as browser-related picture operation, because our right button is actually covered layer.

It is not difficult to fix this problem, the right context menu is the ContextMenu event, and in Ie6+, Firefox, and Chrome browsers, ContextMenu events are triggered immediately after the MouseUp event. So we just have to hide the overlay in the MouseUp event, and then the target element of the ContextMenu event is the following picture, and the code is as follows:

Element.onmouseup = function (event) {

		/* All understand, compatible processing * *

     event = Event  

     

		/* If the right button or include right click * *
	

    if (/^2647$/.test (Event.button)) {

         target.style.visibility = "hidden";

		* * Small timer, just skip the ContextMenu event * *
	

        settimeout (function () {target.style.visibility = "visible";},);                 }         ;         

You can ruthlessly click here: Overlay layer implementation of the previous one after the switch effect demo

Other Notes:
1. Window is Safari Browser, the context menu is triggered after the MouseDown event, not MouseUp, if you also want to be compatible with this browser, you need to do more judgment processing. My personal advice is to ignore it, unless it is under the Mac.

2. CSS to achieve the vertical center of the picture and so has been chewing too rotten, here no longer described.

3 Demo A total of 5 picture browsing. Code implementation does not have too much practicality, only for reference, know the principle can be.

Third, what's the last thing to nag about.

I admire those who are very good designers, do something really good! I also admire those language algorithms very powerful developers, logical thinking is quite strong! However, I am very dismissive of those who judge the top of the front with pure language standards. A lot of front-end is coming from backstage, I do not know what they do the motive of the front end is what, may itself not be mixed up, feel the front end is good bully, or think the front end is more promising, better make a living to eat, or the company no one, on top, top up on the Therefore, its thinking or focus more on the program side, in their view, if you do not understand the algorithm, language low-level do not understand, do development difficult to have a big. This kind of law applies to the pure development nature, you use C + + to write software, or to do JS low-level and so on. However, for the front end of this profession, in view of its complexity, leapfrogging, the title is difficult to identify, this judgment I am very disdain.

As far as the PC Web page is concerned, the page we make is attached to the browser, if you are developing a browser, you must, the algorithm, the bottom and so on are bound to understand; but we just toss things in the browser. In essence, it's no different than beautifying a picture in Photoshop. To see the ultimate goal is to achieve user-friendly, cost-saving pages. For most of the Web page, css/html is definitely the vast majority of so-called JS interaction, mediocre, what object-oriented thinking, with less than what inheritance, such as jquery is so bloated things obviously is not necessary. If you do not use JS can be compatible with all the desired effect, no fool will because you will not JS said you are not excellent front-end. But, in fact, a lot of people will because you are not good at JS, you think that the front end is the same. Thus, "Level 7 of the js+3 level of CSS" will be considered "9 level of CSS level + 3-level JS" does not have their own.

Look, this article's display, the left and right area judgment, the picture vertical horizontal center realization and so on, 10 minutes of CSS working time at least PK 20 minutes of the JS working time, not to calculate the later maintenance. Almost the same effect, you say, is JS Master-driven people excellent, or CSS master-driven people excellent?

This problem is actually a pit, no matter which answer is wrong. It should be said that the best way to achieve what we want to effect is the most excellent front-end. Therefore, those who have the so-called programmer self-good feeling should not feel that the page is not a technical content, perhaps, you are being laughed! -This silly force, clearly a few lines of CSS can be implemented on the tab effect, this ya incredibly wrote hundreds of lines of JS code, laughing crap ~ ~ ~

Pure language level is not necessarily a good front, css/js and other aspects of the ability to be handy. The use of software is not necessarily better than the development of software, you say yes, Mr. Ma!