// 实现图片旋转自适应外边框

//算法:1、当图片宽和高同时大于外边框时以宽为标准100%(相对外边框)进行自适应,原图不变垂直水平居中显示

2、当图片宽大于外边框宽,高小于外边框高时,以宽为标准100%(相对外边框)进行自适应,原图不变垂直水平居中显示

3、当图片宽小于外边框宽,高大于外边框高时,以高为标准100%(相对外边框)进行自适应,原图不变垂直水平居中显示

4、当图片宽小于外边框宽,高小于外边框高时,原图不变垂直水平居中显示

var yuanWh,yuanht,

boxwh,boxht,

imgwh,yuanht;

var imgzoom = function (){

yuanWh = $('.swiper-slide-active

.Rotation').attr('width');

yuanht = $('.swiper-slide-active

.Rotation').attr('height');

var boxwh = $('#mask').width(),//边框的宽度

boxht =

$('#mask').height();

if(yuanWh > boxwh && yuanht > boxht){

if(yuanWh > yuanht){

$('.swiper-slide-active

.Rotation').css({'width':'100%','height':'auto','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});

}else if(yuanWh < yuanht){

$('.swiper-slide-active

.Rotation').css({'width':'auto','height':'100%','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});

}

}else if(yuanWh > boxwh && yuanht <

boxht){

$('.swiper-slide-active

.Rotation').css({'width':'100%','height':'auto','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});

}else if(yuanWh < boxwh && yuanht >

boxht){

$('.swiper-slide-active

.Rotation').css({'width':'auto','height':'100%','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});

}else if(yuanWh < boxwh && yuanht <

boxht){

$('.swiper-slide-active

.Rotation').css({'height':yuanht+'px','width':yuanWh+'px','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});

}else if(yuanWh == boxwh && yuanht == boxht){

$('.swiper-slide-active

.Rotation').css({'width':yuanWh+'px','height':yuanht+'px','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});

}

}

html图片轮播放大,jquery+CSS3实现轮播图、js实现轮播图片自适应等比显示、图片旋转、图片拖拽、鼠标滚动放大缩小...相关推荐

  1. JavaFX鼠标滚动放大缩小图片

    一.鼠标滚动放大缩小图片 package cn.util;import java.io.File; import javafx.application.Application; import java ...

  2. 微信小程序操作图片放大、缩小、旋转、拖拽

    微信小程序操作图片放大.缩小.旋转.拖拽 在开发小程序的时候遇到了上传图片,然后编辑的需求.打算网上找一下相关代码组件的,就不用自己搞这么麻烦.经过一番折腾,还是没有找到如意的,最后自己弄好了,记录一 ...

  3. 微信小程序怎么实现 图片按住一角缩放、旋转、拖拽

    微信小程序怎么实现 图片按住一角缩放.旋转.拖拽 图片一角可以加个小图片,按住来操作 利用movable-view.movable-area 可以实现拖拽缩放.不好旋转 是不是可以利用canvas绘图 ...

  4. jQuery+CSS3炫酷机械键盘js特效

    下载地址 jQuery+CSS3炫酷机械键盘特效,点击键盘按键会出现凹进去的效果,css模拟真实的键盘特效. dd:

  5. 前端图片拖拽,滚轮放大缩小

    拖拽 var offX = 0,offY = 0; onMouseDown(ev) {var svgId = document.getElementById("svgId");sv ...

  6. Unity3D实现 UI图片拖拽旋转和拖拽移动

    拖拽UI旋转 using UnityEngine; using System.Collections; using UnityEngine.EventSystems; public class Rot ...

  7. 鼠标滚动放大缩小图片

    function resizepic(thispic) { if(thispic.width>570) thispic.width=570; } function function bbimg( ...

  8. Qt for python QChartView鼠标滚动放大缩小

    文章目录 前言 基于 QChart 缩放的几种方式 使用QChartView来缩放 使用QChart来平移和缩放 使用QValueAxis或者QDateTimeAxis来平移和缩放 Qt曲线图表模块Q ...

  9. unity 实现了鼠标滚动放大和缩小物体暨拉近拉远相机的效果

    思路是,读取鼠标滚轮的滚动倾向,改变相机的视角域(fieldOfView). 但是,仅仅改变视角域是不行的,因为如果物体在视野边缘,在放大的过程中,也就是视角域缩小的过程中, 物体就可能跑到视野以外去 ...

最新文章

  1. 第一章、FastDFS简介
  2. MyEclipse2015Stable2.0安装破解
  3. LeetCode 325. 和等于 k 的最长子数组长度(哈希表记录第一次出现的状态)
  4. linux git还原文件,Gitlab备份到windows、在Linux恢复
  5. 系统内存分布及操作过程
  6. 小明利用计算机软件绘制函数,辽宁省大连市2014年高二学业水平模拟考试 信息技术试题(三)...
  7. struts2整合spring3整合成功但是spring无法注入
  8. springboot指定属性返回_SpringBoot中属性赋值操作的实现
  9. 2020年电工(技师)证考试及电工(技师)模拟考试软件
  10. 2017 matlab 仿真,【2017年整理】Simulink仿真教程.ppt
  11. java家庭账本_java家庭记账系统
  12. 双绞线有两种接法:EIA/TIA 568B标准和EIA/TIA 568A标准。具体接法如下:
  13. 《孤独的青春创造不孤独的人生》
  14. 高德地图api的使用
  15. C#读取和写入文件(干货分享)
  16. 怎样让表格的行高一样_怎么把excel的行高变成一样的
  17. 单片机工程师面试题小计
  18. Wi-Fi Direct协议详解
  19. html显示word大段空白,word 文档中间出现很大一段空白,中间没有其他东
  20. 2023郑州大学工商管理学硕专业考研成功经验分享

热门文章

  1. 一些名片上最常用的中英文称呼:
  2. 用Vue-cli从头搭建项目
  3. 华为p10测试软件,华为p10内存测试软件
  4. Kubernetes(K8S)入门到运维 ( 六) Helm与功能组件及证书年限
  5. music的matlab程序,DOA经典算法MUSIC的MATLAB代码(作者:Nikhil Shetty).pdf
  6. win7计算机未连接网络,Win7无线网络显示未连接但可以上网的解决办法
  7. 借贷记账法笔记1(资成费借加贷减,收负所借减贷加)
  8. 30分钟了解蒙特卡洛方法
  9. matlab 极限积分,实验二MATLAB中的极限和微分积分运算
  10. python seo 相关的库_11个并不被常用但对开发非常有帮助的Python库