任意尺寸的图片滑动

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;}

$(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"));

});

});

任意尺寸的图片滑动

html图片上下左右滑动,一个支持任意尺寸的图片上下左右滑动效果相关推荐

  1. python批量生成图片_利用Python批量生成任意尺寸的图片

    实现效果 通过源图片,在当前工作目录的/img目录下生成1000张,分别从1*1到1000*1000像素的图片. 效果如下: 目录结构 实现示例 # -*- coding: utf-8 -*- imp ...

  2. PHP实现将任意尺寸的图片裁剪后等比缩放到任意尺寸的透明图片上,并实现图片翻转...

    类库地址 github.com/jinqiubj/Pi- 此类库满足以下需求 将任意尺寸的图片等比缩放到任意尺寸的透明图片上,如图1是一张200*200的正方形图片. 在等比缩放的同时,此类库可根据图 ...

  3. uniapp微信小程序图片裁剪插件,支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式

    qf-image-cropper2.0 图片裁剪插件 1.效果预览: 2.平台支持: 1.支持微信小程序(移动端.PC端.开发者工具) 2.H5平台(2.1.0版本起) 3. 支持APP平台(2.1. ...

  4. python批量生成图_利用Python批量生成任意尺寸的图片

    实现效果 通过源图片,在当前工作目录的/img目录下生成1000张,分别从1*1到1000*1000像素的图片. 效果如下: 目录结构 实现示例 # -*- coding: utf-8 -*- imp ...

  5. 设置图片格式为php,php 将bmp图片转为jpg等其他任意格式的图片

    php // 例子: $path = root . ' upload/2009/06/03/124401282315771. ' ; $pathall = $path . ' bmp ' ; $mi ...

  6. uniapp图片编辑器,支持自定义尺寸、缩放、拖动、裁剪

    支持功能: 1.自定义裁剪尺寸 2.等比例缩放 3.自由拖动 5.裁剪生成新图片 6.本地选择图片 实现代码: <!-- 图片编辑器,支持自定义尺寸.缩放.拖动.裁剪@version 1.0.2 ...

  7. 生成连笔字图片php,设计一个属于自己的艺术签名,名字连笔签名设计软件

    一个不错的签名将可以衬托出一个人的身份,不然字如其名也不是白叫的哈哈(小编也不知道这是什么梗).现在很多名人都会拥有属于自己的个性签名,毕竟名人嘛,名字签的不好看也说得不过去.那么今天小编就为你介绍一 ...

  8. kafka消息消费有延迟_如何在MQ中实现支持任意延迟的消息?

    什么是定时消息和延迟消息? 定时消息:Producer 将消息发送到 MQ 服务端,但并不期望这条消息立马投递,而是推迟到在当前时间点之后的某一个时间投递到 Consumer 进行消费,该消息即定时消 ...

  9. 仿照微信的效果,实现了一个支持多选、选原图和视频的图片选择器,适配了iOS6-10系统,3行代码即可集成....

    重要提示: 1. 1.9.0版本已发布,移除了"prefs:root="的调用,这个API已经被列为私有API,请大家尽快升级.其它同样使用了该API的库大家可以检查下,比如著名的 ...

最新文章

  1. 中国联通沈阳互联网数据中心
  2. noip2016 换教室
  3. 使用CSS完美实现垂直居中的方法
  4. mysql悲观锁 更新_MySQL学习笔记(四)悲观锁 for update
  5. c语言枚举代替双switch,C语言 使用数组代替switch分支语句降低圈复杂度
  6. CSS之两栏固定布局(二)
  7. mysql binary 查询_MYSQL的binary解决mysql数据大小写敏感问题 《转载》
  8. java编程显当前月示日历表_显示当前月的日历 1(java实现)
  9. angular ui-bootstrap的Datepicker Popup组件问题总结
  10. 苹果手机上网速度慢_是什么原因导致手机网速慢!
  11. pow函数在php,pow函数怎么用
  12. jquery-实现的添加个人信息加验证,附完全的注释,相信大家可以看懂
  13. 给大家分享一篇 用Python抓取漫画并制作mobi格式电子书
  14. 如何在C#中将 加载、编辑WPS表格?国产控件就能搞定
  15. 微信小程序手机号绑定功能(登录后绑定)
  16. 学完python可以从事哪些工作?
  17. 用DTM实现网页转化跟踪,广告投放效果实时监测
  18. 解决win10莫名其妙重启问题
  19. 小米手机风筝守护显示服务器异常,风筝守护只能小米用吗
  20. TogetherJS – 酷!在网站中添加在线实时协作功能

热门文章

  1. linux agetty 登录框进程简介
  2. VMware的快照和克隆总结
  3. smarty实例教程
  4. 我的VC++——对话框中显示GIF格式的图片
  5. Linux内核探讨-- 第五章
  6. 鸿蒙开发板能干什么,【鸿蒙开发板试用报告】用OLED板实现FlappyBird小游戏(中)...
  7. 服务器装系统无显示屏,服务器系统安装后没有桌面
  8. idc 计算机行业数据分析,IDC:2015年计算机科技行业趋势预测
  9. mybatis 注解和xml同时实现
  10. java 本地通信_java – 本地JVM之间的通信