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


Posted in Javascript onAugust 24, 2014

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

<! 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>
Javascript 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
javascript判断office版本示例
Apr 11 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 #Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 #Javascript
js获取checkbox复选框选中的选项实例
Aug 24 #Javascript
jQuery异步加载数据并添加事件示例
Aug 24 #Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 #Javascript
Jquery中扩展方法extend使用技巧
Aug 24 #Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 #Javascript
You might like
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
Python获取任意xml节点值的方法
2015/05/05 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
python:动态路由的Flask程序代码
2019/11/22 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
final, finally, finalize的区别
2012/03/01 面试题
大学校运会广播稿
2014/02/03 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
机关作风建设工作总结
2014/10/23 职场文书
通报表扬范文
2015/01/17 职场文书
考研英语辞职信
2015/05/13 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL