【javascript】javascript实现background-size:cover的功能

    <script type=‘text/javascript‘>
    $(function(){
        var screenWidth = $(window).width();
        var screenHeight = $(window).height();
        //console.log(screenWidth+‘//‘+screenHeight);
        var screenScale = screenWidth/screenHeight;
        var imgWidth = $(‘.banner6 img‘).width();
        var imgHeight = $(‘.banner6 img‘).height();
        var scale = imgWidth/imgHeight;
        if(screenScale > scale){
            $(‘.banner6 img‘).width(screenWidth);//以宽为标准
            $(‘.banner6 img‘).height(screenWidth/scale);
            //console.log(‘11:‘+ $(‘.banner6 img‘).width()+‘:‘+$(‘.banner6 img‘).height());
        }else{
            $(‘.banner6 img‘).width(screenHeight*scale);//以高为标准
            $(‘.banner6 img‘).height(screenHeight);
            //console.log(‘22:‘+ $(‘.banner6 img‘).width()+‘:‘+$(‘.banner6 img‘).height());
        }
    })
    </script>

时间: 2024-07-29 01:35:05

【javascript】javascript实现background-size:cover的功能的相关文章

JavaScript大杂烩13 - 总结ECMAScript 5新功能

虽说这个标准已经出来很久了,所有的主流浏览器的最新版本也都支持了这些特性,但是很多的教程中并没有包含这个部分,这一节我们专门来总结一下这个标准中的新功能. Object的新方法 在最新的JavaScript规范(ECMAScript 5)中,Object扩展了很多不错的静态方法,下面来简单看一下: 1. create/getPrototypeOf方法 - 干净的原型链 先说简单的getPrototypeOf方法,这个方法统一了获取对象原型的方式,使用这个对象可以获取到对象的原型,这个不多说了.

通过javascript库JQuery实现页面跳转功能代码

通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum").val();//#gotopagenum是文本框的id属性 location.href = "NewList.aspx?pagenum="+pn;//location.href实现客户端页面的跳转 }); 实例2: 实现跳转:window.location = 'user!add.

使用javascript,jquery实现的图片轮播功能

使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以直接把代码copy下来,放入一个html 文件即可,然后把jquery文件放在同一个文件夹下就可以了.文件下载地址:http://download.csdn.net/detail/xyytcs/5037545 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

JavaScript 学习笔记: 扩充类型的功能

JavaScript 是允许给基本类型扩充功能的.例如,可以通过对Object.prototype增加方法,可以让该方法对所有的对象都可用. 这样的方式对函数,数组,字符串,数字,正则表达式和布尔值同样适用. 例如,可以通过对Function.prototype 增加方法对所有的函数可用: Function.prototype.method = function(name, func) { this.prototype[name] = func; return this; } 通过给Functi

javascript 数组扩展实现 php array_count_values() 函数功能

在PHP中,array_count_values() 这个函数可以统计数组元素出现的次数,这个函数会返回一个数组,键名是原数组的值,键值是这个值出现的次数. 但是JavaScript中没有这样的函数.不过大神无数,前些日子发现这样的一个扩展: /** javascript 数组扩展实现 php array_count_values() 函数功能 */ (function(window){ if ( window.ActiveXObject ) { window.Array.prototype.i

[JavaScript] JavaScript 面向对象设计 (3) : 多态与界面篇

在前一篇中我们介绍了基础的 JavaScript 继承实践法,透过 Object.prototype 我们可以自由决定对象要继承自哪个对象,也可以扩充对象目前现有的属性和方法 (和 C# 的 Extension Method 有异曲同工之妙),在本篇中,我们要来介绍面向对象的另一个特性:多态 (Polymorphism). 在前一篇中我们介绍了基础的 JavaScript 继承实践法,透过 Object.prototype 我们可以自由决定对象要继承自哪个对象,也可以扩充对象目前现有的属性和方法

[Javascript] Javascript &#39;in&#39; opreator

If you want to check whether a key is inside an Object or Array, you can use 'in': Object: const obj = { name: 'GraphQL', watched: false }; console.log('name' in obj); // true console.log('title' in obj); // false Array: const characters = [ 'Harry P

零元学Expression Blend 4 - Chapter 24 以实作了解Cover Flow功能

原文:零元学Expression Blend 4 - Chapter 24 以实作了解Cover Flow功能 今天要介绍一个Silverlight Toolkit内好用且在图片展示操作上很常见的元件-「Cover Flow」 今天要介绍一个??Codeplex??内好用且在图片展示操作上很常见的元件-「Cover Flow」 ? 请点击後方图片做切换 很抱歉,阁下使用的浏览器并不支援 IFrame,不能正常浏览我的网页 ? 01 首先,需要先到Codeplex? 下载Cover Flow 点击

JavaScript实现全选选项框的功能和鼠标划入出现下拉框的功能--JavaScript实例集锦(初学)

有一些论坛,文章后台编辑都会出现选择框的操作. 1.实现选项框全选和取消全选的功能: 代码实现: <!DOCTYPE html> <html> <head> <title>全选功能</title> <script type="text/javascript"> window.onload=function(){ var oBtn=document.getElementById('btn'); var aInput=