左右推拽显示对比图 - jQyery封装 - 附源文件
闲来无事,做了一个模块效果
左右拖拽显示对比图,是用jq封装的
利用鼠标距离左侧(0,0)坐标的横坐标位移来控制绝对定位的left值
再配合背景图fixed属性,来制作视觉差效果
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左右推拽显示对比图</title>
<style>
body {overflow:hidden;background:#000;}* {margin:0;padding:0;}
.wrap {width:1100px;height:610px;border:solid 1px #ddd;margin:0 auto;position:relative;overflow:hidden;background:#fff;}
.box1,.box2 {width:1100px;height:610px;position:absolute;left:0;top:0;}
.box1 {z-index:2;background:url(images/car-01.png) center fixed no-repeat;}
.box2 {z-index:3;background:url(images/car-02.png) center #ddd fixed no-repeat;left:550px;}
.handle {width:42px;height:42px;background:url(images/hand.png) no-repeat;position:absolute;left:529px;z-index:10;top:400px;} .cursor {cursor:url(images/6.ico),auto;}
.nocur {cursor:default;}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
</head> <body id="body">
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="handle"></div>
</div> <script> ;(function($){
$.fn.drag = function(arg,mover){
var _move = false;//先给不让移动
mover = $('.'+mover)
var _x;
var _y; //鼠标离左上角的值
arg = this;
function ab(arg){
arg.mouseover(function(){
$('body').addClass('cursor');
});
arg.mouseout(function(){
$('body').removeClass('cursor');
});
arg.mousedown(function(){
this.style.cursor = 'url(images/5.ico),auto';
});
arg.mouseup(function(){
this.style.cursor = 'url(images/6.ico),auto';
}); arg.click(function(e) {
var e = e || window.event;
//alert('按下鼠标');
}).mousedown(function(e) {
_move = true;
_x = e.pageX - parseInt(arg.css('left'));//获取左上角坐标 _x
});
$(document).mousemove(function(e) {
if(_move == true)
{
var x = e.pageX - _x;// 鼠标当前位置减去(鼠标当前位置,距离元素左上角的距离 s ) 获得现在左上角距离浏览器左上角的新值
if(x > 0 && x < 1100){
arg.css({'left':x});
mover.css({'left':x+21});
}
if (x<=0) {
arg.css({'left':'0px'});
mover.css({'left':'21px'});
}
if (x>1053) {
arg.css({'left':'1058px'});
mover.css({'left':'1079px'});
}
}
}).mouseup(function(e){
_move = false;
}); b = function(){
var i;
arg.animate({left:'1058px'},800);
mover.animate({left:'1079px'},800,function(){
arg.animate({left:'0px'},800);
mover.animate({left:'21px'},800,function(){
arg.animate({'left':'529px'},800);
mover.animate({'left':'550px'},800);
});
});
}
b();
return this;
}
ab(arg);
}
})(jQuery);
$('.handle').drag(this,'box2'); </script>
</body>
</html>
封装的不是很彻底,不过主体效果实现了,可以自己拿着修改一下啊
下面的是缩略图
http://files.cnblogs.com/files/Sinhtml/animation.rar
左右推拽显示对比图 - jQyery封装 - 附源文件的更多相关文章
- android 项目学习随笔十七(ListView、GridView显示组图)
ListView.GridView显示组图,处理机制相同 <?xml version="1.0" encoding="utf-8"?> <Li ...
- Winform中Picture控件图片的拖拽显示
注解:最近做了一个小工具,在Winform中对Picture控件有一个需求,可以通过鼠标从外部拖拽图片到控件的上,释放鼠标,显示图片! 首先你需要对你的整个Fom窗口的AllowDrop设置Ture ...
- excel在一个图表内,显示折线图和柱状图
折线图和柱状图,在同一个图表中拆分显示 一个图,设置主坐标轴 另外一个图,设置次坐标轴 拆分,通过调整纵坐标的最小值和最大值来实现 关于图表的标题,选中图表,选择布局,然后图表 ...
- iOS8自定义推送显示按钮及推送优化
http://www.jianshu.com/p/803bfaae989e iOS8自定义推送显示按钮及推送优化 字数1435 阅读473 评论0 喜欢2 导语 在iOS8中,推送消息不再只是简单地点 ...
- Chart图表整合——面积对比图、扇形图、柱状图
一. chart图表demo网址 网址:http://antv.alipay.com/zh-cn/f2/3.x/demo/index.html 二. 本文主要对面积对比图,扇形图,柱状图三大常见图进行 ...
- Android 使用pl.droidsonroids.gif.GifImageView在安卓中显示动图遇到的问题
在做一款聊天软件,其中聊天界面需要发送表情,而表情都是动图,在安卓中想要显示动图,就要借助第三方框架,我选的是pl.droidsonroids.gif.GifImageView. 使用方法如下:你在g ...
- CS5642-V3与OV5642-FPC通过icamera测试方向的对比图
有朋友会有如此的疑问:CS5642-V3与OV5642-FPC在采集板上通过icamera测试图像方向是一样吗?通过本文您会找到答案 测试:CS5642-V3与OV5642-FPC的管脚在上 以下 ...
- Intel和AMD的CPU性能对比图
Intel和AMD的CPU性能对比图:
- pixijs shader颗粒化显示贴图
pixijs shader颗粒化显示贴图 const app = new PIXI.Application({ transparent: true }); document.body.appendCh ...
随机推荐
- 50个PHOTOSHOP快捷键技能!
一.常用的热键组合 1.图层混合模式快捷键:正常(Shift + Option + N),正片叠底(Shift + Option + M),滤色(Shift + Option + S),叠加(Shif ...
- 转:BZERO()等的区别
BZERO()等的区别 bzero 原型: extern void bzero(void *s, int n); 用法: #include <string.h> 功能:置字节字符串s的前 ...
- 获取Map API Key
开发人员在基于Google Maps服务进行开发之前,需要申请一组验证过的Map API Key,这样才可以使用Google Maps服务.申请过程如下:1.在Eclipse中打开“Window”|“ ...
- Keil C51对同一端口的连续读取方法
C语言是当前举世公认的高效简洁而又非常贴近硬件的编程语言之一.将C语言向单片机MCS-51上的移植始于2O世纪8O年代的中后期,经过近1O年的发展,C语言克服了产生代码过长.运行速度较慢的缺点,并且由 ...
- 天底下最简单的QT画图板,就一个类,60行代码
简单直观.但是我有个问题是,这实际上不是在绘制直线,而是几千几万个超级短的“直线”,这样会不会效率很低呢? 注意,每次绘制的时候,需要一支笔,这支笔需要设置颜色和宽度(就像我们平时写字也要稍微挑一下笔 ...
- 输出宽字符数组 C++
std::cout << "ASCII and ANSI" << std::endl;std::wcout << L"INSERT M ...
- chrome浏览器测试js函数
1.直接在console中写入代码 2.既要写函数,又要写执行函数的代码. 不关闭网页,函数能够在内存中存活很久 浏览器都能记住函数. 当然,在其他页面无效.
- [LeetCode] 179. Largest Number 解题思路
Given a list of non negative integers, arrange them such that they form the largest number. For exam ...
- 如何通过ftell和fseek来获取文件大小
#include <stdio.h> int main () { FILE * pFile=NULL; long size; pFile = fopen ("myfile.txt ...
- php防sql注入、xss
php自带的几个防止sql注入的函数http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2013/0318/12234.html addslashe ...