Js and auto scaling Image Auto-scaling image multi-browser compatibility method summary original

Source: Internet
Author: User

Recently, I made an image auto-scaling effect and found that the JavaScript code that has been used is abnormal in firefox, resulting in page deformation. so I wrote a general compatibility code for you to discuss.
I used pjblog
Copy codeThe Code is as follows:
// Search for images with a large width in the webpage for scaling and PNG correction
Function ReImgSize (){
For (I = 0; I <document. images. length; I ++)
{
If (document. all ){
If (document. images [I]. width & gt; 550)
{
Document. images [I]. width = "550" // It is not high, which will obviously cause deformation of the image
Try {
Document. images [I]. outerHTML = '<a href = "' + document. images [I]. src + '"target =" _ blank "title =" open an image in a new window ">' + document. images [I]. outerHTML + '</a>'
} Catch (e ){}
}
}
Else {
If (document. images [I]. width> 400 ){
// Neither width nor height makes firefox images larger
Document. images [I]. title = "open an image in a new window"
Document. images [I]. style. cursor = "pointer"
Document. images [I]. onclick = function (e) {window. open (this. src )}
}
}
}
}

The disadvantage of the very good code is that the large image in firefox will be deformed, and the image in the region cannot be controlled. If you want a large image, it will become a small image.
I wrote it myself,
Copy codeThe Code is as follows:
Function $ (objectId ){
If (document. getElementById & document. getElementById (objectId )){
// W3C DOM
Return document. getElementById (objectId );
}
Else if (document. all & document. all (objectId )){
// MSIE 4 DOM
Return document. all (objectId );
}
Else if (document. layers & document. layers [objectId]) {
// NN 4 DOM.. note: this won't find nested layers
Return document. layers [objectId];
}
Else {
Return false;
}
}
Function dxy_ReImgSize (){
Var box = $ ("dxy_content ");
Var imgall = box. getElementsByTagName ("img ")
For (I = 0; I {
If (imgall [I]. width & gt; 500)
{
Var oWidth = imgall [I]. width;
Var oHeight = imgall [I]. height;
Imgall [I]. width = "500 ";
Imgall [I]. height = oHeight * 500/oWidth;
}
}
}

We can also find that if a low browser does not support getElementsByTagName, you will not be able to play. The advantage is that you can control the area.
Finally, there is no way to solve this problem.
Copy codeThe Code is as follows:
Function ReImgSize (){
For (I = 0; I <document. images. length; I ++)
{
If (document. all ){
If (document. images [I]. width & gt; 500)
{
Var oWidth = document. images [I]. width;
Var oHeight = document. images [I]. height;
Document. images [I]. width = "500 ";
Document. images [I]. height = oHeight * 500/oWidth;
Document. images [I]. outerHTML = '<a href = "' + document. images [I]. src + '"target =" _ blank "title =" open an image in a new window ">' + document. images [I]. outerHTML + '</a>'
}
}
Else {
If (document. images [I]. width> 500 ){
Var oWidth = document. images [I]. width;
Var oHeight = document. images [I]. height;
Document. images [I]. width = "500 ";
Document. images [I]. height = oHeight * 500/oWidth;
Document. images [I]. title = "opening an image in a new window ";
Document. images [I]. style. cursor = "pointer"
Document. images [I]. onclick = function (e) {window. open (this. src )}
}
}
}
}

Note that I added
Copy codeThe Code is as follows:
Var oWidth = document. images [I]. width;
Var oHeight = document. images [I]. height;
Document. images [I]. width = "500 ";
Document. images [I]. height = oHeight * 500/oWidth;

If you find any better method, post it.
Www.jb51.net script Home Original, reprinted please indicate the source

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.