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


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 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
前台js调用后台方法示例
Dec 02 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 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
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
PHP 字符串 小常识
2009/06/05 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
vue实现微信分享功能
2018/11/28 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
跟老齐学Python之再深点,更懂list
2014/09/20 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python多任务及返回值的处理方法
2019/01/22 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
工厂保洁员岗位职责
2013/12/04 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
长征观后感
2015/06/09 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书