Based on JavaScript to realize the mobile end click on the picture to see big Picture click Hide _javascript Tips

I. Demand

Click on the picture to see the larger picture, and then click on the big picture hidden. More for the mobile end, because the mobile side screen is small, you may need to view the larger image.

Second, the Code

<! DOCTYPE html>  

Third, skills

Because the mobile side cannot add hotspots, the final solution is to use the four a tag to navigate to the upper left corner, the upper right corner, the lower left corner, and the lower right corner of the four areas.

 <dl> <dd style= "Display:block;" >  <a href= "javascript:;" src= "images/11.jpg" class= "TopLeft" $ (this). Imgzoomin (); " ></a> <a href= "javascript:;" src= "images/12.jpg" class= "TopRight" $ (this). Imgzoomin (); " ></a> <a href= "javascript:;" src= "images/13.jpg" class= "Bottomleft" $ (this). Imgzoomin (); " ></a> <a href= "javascript:;" src= "images/14.jpg" class= "BottomRight" $ (this). Imgzoomin (); "
 ></a> </dd> ... </dl> css. topleft,.topright,.bottomleft,.bottomright{width:50%;
 height:50%;
Position:absolute;
 }. topleft{/*background-color:red;*/top:0;
left:0;
 }. topright{/*background-color:green;*/top:0;
right:0;
 }. bottomleft{/*background-color:blue;*/bottom:0;
left:0;
 }. bottomright{/*background-color:yellow;*/bottom:0;
right:0; }

PS: Mobile website Mobile end of the image implementation of delay loading

Due to the domestic telecommunications network cost-performance restrictions, and mobile phone processing capabilities of the difference, in the design of a wireless application,

Saving traffic for users is a very important factor to consider. It can be said that every byte should be saved for the client.

Save the flow can be from the following areas of concern:

First, using caching, such as using browser local storage, has been discussed before

Second, delay loading code (contact bottom detection, access to data through the interface)

Third, the resource delay loading, the picture appears in the visible area to reload, (does not consider the automatic playback case) The audio video presses the user to click to load.

Today, briefly describe the implementation of the picture delay loading.

Examples are based on jquery and jquery mobile

Rationale: The user slides the screen, and the screen scrolling ends (appropriate for the window Scrollstop event provided with jquery) detects the picture appearing in the viewport.

Replace the true src attribute of the picture.

Tip: Do not immediately detect the load after scrolling, set a second delay, perhaps the user will immediately start the next rolling screen, based on the current network environment, the 1-second delay can explain the user really want to see the content. A friend with a micro-trust can take a closer look at this.

Because of the clock control, when the user frequently quickly flip the screen, will not send a large number of requests.

Main code:

var refreshtimer = null, Mebook = Mebook | |
{}; * * Scrolling End screen still a second to detect which pictures appear in the viewport * and PC-side differences due to the wireless speed limit and mobile phone computing power difference 1 seconds delay on the phone end of the user can endure * * * $ (window). On (' Scrollstop ',
 function () {if (Refreshtimer) {cleartimeout (Refreshtimer);
 Refreshtimer = null;
} Refreshtimer = settimeout (Refreshall, 1E3);
});
  $.belowthefold = function (Element) {var fold = $ (window). Height () + $ (window). scrolltop ();
Return fold <= $ (element). Offset ().
};
  $.abovethetop = function (Element) {var top = $ (window). scrolltop ();
Return top >= $ (Element). Offset (). Top + $ (element). Height ();
}; * * To determine whether an element appears in viewport depends on the two extension methods/$.inviewport = function (Element) {return!$.belowthefold (Element) &&!$.
Abovethetop (Element)};
  Mebook.getinviewportlist = function () {var list = $ (' #bookList Li '), ret = [];
    List.each (function (i) {var li = List.eq (i);
    if ($.inviewport (LI)) {mebook.loadimg (LI);
}
  });
}; mebook.loadimg = function (LI) {if (Li.find (' img[_src] '). Length) {var img = li.find (' img[_src] '), src = img.attr (' _src ');
    Img.attr (' src ', src). Load (function () {img.removeattr (' _src ');
  }); }
};