一个支持任意尺寸的图片上下左右滑动效果

常常遇到图片通过后台上传后就变形了的问题，如果你的网站风格适合，可以用这种方式来给页面布局，支持任意尺寸的图片滑动（上下左右滑动）

<! DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>任意尺寸的图片滑动</title>
<style>
div { margin: 0 auto; overflow: hidden;}
.main { width: 1000px;}
.divimg_div1 { width: 380px; float: left;}
.divimg .div4_title { width: 380px; height: 103px; background-color: #EDB205; color: #FFF; font-family: "微软雅黑"; font-size: 22px; font-weight: bold; line-height: 90px; text-align: center; letter-spacing: 5px;}
.divimg_img1 { width: 380px; height: 414px; margin-top: 5px; background-color: #FFF; position: relative;}
.divimg_div2 { width: 615px; float: right;}
.divimg_img2 { width: 194px; height: 256px; float: left; background-color: #FFF; position: relative;}
.divimg_img3 { width: 417px; height: 256px; float: right; background-color: #FFF; position: relative;}
.divimg_img4 { width: 366px; height: 262px; float: left; margin-top: 4px; background-color: #FFF; position: relative;}
.divimg_img5 { width: 245px; height: 262px; float: right; margin-top: 4px; background-color: #FFF; position: relative;}
.divimg .gif { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; z-index: 2;}
.divimg .img { position: absolute; z-index: 1; left: 0; top: 0; display: none;}
</style>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(e) {
$(".divimg .img").load(function(){
var w=parseInt($(this).width());
var h=parseInt($(this).height());
var hh=$(this).parent().height();
var ww=$(this).parent().width();
var blw=w/parseInt(ww);
var blh=h/parseInt(hh);
function left(){
$(this).animate({left:-(parseInt(parseInt(hh)/h*w)-(parseInt(ww)))},10000,right)
}
function right(){
$(this).animate({left:0},10000,left);
}
function top(){
$(this).animate({top:-(parseInt(parseInt(ww)/w*h)-(parseInt(hh)))},10000,bottom);
}
function bottom(){
$(this).animate({top:0},10000,top);
}
if(blw > blh)
{
$(this).height(hh).width(parseInt(parseInt(hh)/h*w));
$(this).prev().hide();
$(this).css({"z-index":"3","display":"block"});
$(this).animate({left:-(parseInt(parseInt(hh)/h*w)-(parseInt(ww)))},10000,right);
}
else if(blw < blh)
{
$(this).height(parseInt(parseInt(ww)/w*h)).width(ww);
$(this).prev().hide();
$(this).css({"z-index":"3","display":"block"});
$(this).animate({top:-(parseInt(parseInt(ww)/w*h)-(parseInt(hh)))},10000,bottom);
}
});
$(".div4 .img").each(function(index, element) {
$(this).attr("src",$(this).attr("name"));
});
});
</script>
</head>
<body>
<div class="main">
<div class="divimg">
<div class="divimg_div1">
<div class="divimg_title">任意尺寸的图片滑动</div>
<div class="divimg_img1"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_bigimg01.jpg" src="" /> </div>
</div>
<div class="divimg_div2">
<div class="divimg_img2"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_nyimg01.jpg" src="" /> </div>
<div class="divimg_img3"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_img02.jpg" src="" /> </div>
<div class="divimg_img4"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_newimg01.jpg" src="" /> </div>
<div class="divimg_img5"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_rynewimg03.jpg" src="" /> </div>
</div>
</div>
</div>
</body>
</html>
赞 (0)

相关推荐

  • 一个支持任意尺寸的图片上下左右滑动效果

    常常遇到图片通过后台上传后就变形了的问题,如果你的网站风格适合,可以用这种方式来给页面布局,支持任意尺寸的图片滑动(上下左右滑动) <! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>任意尺寸的图片滑动</title> <sty

  • 利用Python批量生成任意尺寸的图片

    利用Python批量生成任意尺寸的图片

    实现效果 通过源图片,在当前工作目录的/img目录下生成1000张,分别从1*1到1000*1000像素的图片. 效果如下: 目录结构 实现示例 # -*- coding: utf-8 -*- import threading from PIL import Image image_size = range(1, 1001) def start(): for size in image_size: t = threading.Thread(target=create_image, args=(s

  • js实现手机web图片左右滑动效果

    最近在做一个手机端web站点,里面有一个图片展示效果: 1.点击任意图片时图片全屏展示,左右滑动能展示其他的图片. 2.滑动超过一定范围自动滑到下一张图片,不超过则回退到当前照片位置.此处的滑动要带动画效果 实现: 每张图片外面一个div,将其宽度设置为100%,最外层有一个div[命名为outerDiv],其宽度设为:总图片数量*100+'%'.给最外层div设置touchstart,touchmove,touchend事件监听处理函数,在touchmove中根据移动的x轴距离动态改变oute

  • Android实现图片左右滑动效果

    Android实现图片左右滑动效果

    关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现.接下来就让我们开始实现这种效果. 接下来我们看一下程序结构图: MainActivity文件中代码: package com.android.flip; import android.app.Activity; import android.os.Bundle; import android.view.GestureDetector; import andro

  • Android使用ViewPager实现屏幕滑动效果

    使用ViewPager实现屏幕滑动 从一个完整的屏幕移动到另一个屏幕的过程被称为屏幕滑动,在安装向导.幻灯片中应用广泛.下面介绍如何利用Android Support库的ViewPager来实现屏幕滑动. 创建View 创建一个在之后作为fragment的内容的布局文件,下面的例子中包含一个Textview,用来展示一些文字. <!-- fragment_screen_slide_page.xml --> <ScrollView xmlns:android="http://sc

  • Android实现左右滑动效果的方法详解

    Android实现左右滑动效果的方法详解

    本示例演示在Android中实现图片左右滑动效果. 关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现.接下来就让我们开始实现这种效果.为了方便大家理解,我们先来看一下效果图:主要效果图如下图:    接下来我们看一下程序结构图: MainActivity文件中代码: 复制代码 代码如下: package com.android.flip;import android.app.Activity;import a

  • vue集成一个支持图片缩放拖拽的富文本编辑器

    vue集成一个支持图片缩放拖拽的富文本编辑器

    需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很难找到一个完美符合自己要求的编辑器.经过多次尝试,最终选择了wangEditor富文本编辑器. 最初使用的是vue2Editor富文本编辑器,vue2Editor本身是不支持图片拖拽的,但是提供了可配置图片拖拽的方法,需要借助Quill.js来实现图片拖拽.虽然满足了业务需求,但是在移动端展示的效果不是很理想. 此次编辑器主要是

  • Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

    Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

    自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScrollView可以想ViewPager一样,既可以绑定数据集(动态改变图片),还能做到,不管多少图片都不会OOM(ViewPager内

  • Android开发之使用ViewPager实现图片左右滑动切换效果

    Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为ViewPager的滑动page,布局都是相同的,如下只展示其中之一: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

  • matplotlib 输出保存指定尺寸的图片方法

    其实这个问题来源于笔者的横坐标太多了,然后生成的那个figure框框太小,导致坐标重叠,而输出的图片是需要批量保存的,总不能每次都拉长截图吧 所以在plot绘图之前加上了一句 plt.figure(figsize=(10, 5)) 图就变了hhh 然后偶然间有发现了能调节子图也就是subplot性质的一个api蛮有趣的,分享下 plt.subplots_adjust(left=0.09,right=1,wspace=0.25,hspace=0.25,bottom=0.13,top=0.91) 然

随机推荐