一阶段项目 总结 之 两张图片对比 手写 jquery 也可以使用beer slider 插件
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../public/jquery.min.js" type="text/javascript" charset="utf-8"></script>
设置样式
.aa{
background-image: url(../../img/kongtiao/clean.jpg);
position: relative;
background-repeat: no-repeat;
background-position: center 0;
background-size: cover;
height: 760px;
}
.move-line {
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
/* background: #fff; */
background: bisque;
z-index: 3;
}
background-image: url(../../img/kongtiao/clean-btn.png);
position: absolute;
bottom: 120px;
left: -76px;
width: 77px;
height: 77px;
margin-left: 38px;
background-color: #c7b69d;
border-radius: 50%;
z-index: 4;
background-repeat: no-repeat;
background-position: center 0;
background-size: 100% 100%;
cursor: pointer;
}
.img{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
overflow: hidden;
z-index: 2;
/* border: 1px solid black; */
}
.img1{
background-image: url(../../img/kongtiao/clean-mask.png);
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center 0;
background-position-y: 70%;
}
</style>
</head>
<body>
<div class="aa">
<div class="img">
<div class="img1">
</div>
</div>
<div class="move-line">
<span id="cca"></span>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var cca = $(".move-line");
/* 绑定鼠标左键按住事件 */
cca.bind("mousedown",function(event){
/* 获取需要拖动节点的坐标 */
var offset_x = $(this)[0].offsetLeft;//x坐标
var offset_x2 = $("html").width()-offset_x;//x坐标
//var offset_y = $(this)[0].offsetTop;//y坐标
/* 获取当前鼠标的坐标 */
var mouse_x = event.pageX;
//var mouse_y = event.pageY;
/* 绑定拖动事件 */
/* 由于拖动时,可能鼠标会移出元素,所以应该使用全局(document)元素 */
$(document).bind("mousemove",function(ev){
/* 计算鼠标移动了的位置 */
var _x = ev.pageX - mouse_x;
//var _y = ev.pageY - mouse_y;
var now_x1 = (offset_x + _x )
if (now_x1<=$("html").width()) {
/* 设置移动后的元素坐标 */
var now_x1 = (offset_x + _x ) + "px";
var now_x2 = (offset_x2 - _x ) + "px";
} else{
var now_x1 = $("html").width() + "px";
var now_x2 = 0 + "px";
}
//var now_y = (offset_y + _y ) + "px";
/* 改变目标元素的位置 */
$(".img").css({
//top:now_y,
width:now_x2});
$(".move-line").css({
//top:now_y,
left:now_x1
});
});
});
/* 当鼠标左键松开,接触事件绑定 */
$(document).bind("mouseup",function(){
$(this).unbind("mousemove");
});
})
</script>
一阶段项目 总结 之 两张图片对比 手写 jquery 也可以使用beer slider 插件的更多相关文章
- 太刺激了,面试官让我手写跳表,而我用两种实现方式吊打了TA!
前言 本文收录于专辑:http://dwz.win/HjK,点击解锁更多数据结构与算法的知识. 你好,我是彤哥. 上一节,我们一起学习了关于跳表的理论知识,相信通过上一节的学习,你一定可以给面试官完完 ...
- 用python对比两张图片的不同
from PIL import Image from PIL import ImageChops def compare_images(path_one, path_two, diff_save_lo ...
- python实战===用python对比两张图片的不同
from PIL import Image from PIL import ImageChops def compare_images(path_one, path_two, diff_save_lo ...
- [Alpha阶段]项目展示博客
目录 Alpha阶段项目展示 1.团队成员介绍 2.工程相关信息 (1)我们的用户 (2)产品表现 (3)团队分工 (4)项目管理 (5)测试 (6)文档 (7)用户调研 3.项目信息 (1)实际进展 ...
- 秘制牛肉Alpha阶段项目展示
秘制牛肉Alpha阶段项目展示 1.团队成员和个人博客 · 左顺:"我是左顺,秘制牛肉队开发人员". · 王尖兵:"C,java,html5都会一点的菜鸡,没做过团队项目 ...
- beta阶段——项目复审
beta阶段--项目复审 小组的名字和链接 优点 缺点 bug 排名顺序 颜罗王team http://www.cnblogs.com/LDLYMteam 界面清新,音乐能够选择是否播放,词汇按照四六 ...
- Beta阶段项目展示博客
Beta阶段项目展示 团队成员的简介 详细见团队简介 角色 姓名 照片 项目经理,策划 游心 策划 王子铭 策划 蔡帜 美工 赵晓宇 美工 王辰昱 开发.架构师 解小锐 开发 陈鑫 开发 李金奇 开发 ...
- Gamma阶段项目展示
Gamma阶段项目展示 一. 团队成员介绍 姓名 Gamma职责 个人博客 张圆宁 PM,后端 个人博客 王文珺 后端 个人博客 牛宇航 后端 个人博客 申化文 后端 个人博客 汪慕澜 测试,部署 个 ...
- 秘制牛肉Gamma阶段项目展示
秘制牛肉Gamma阶段项目展示 1.团队成员和个人博客 · 左顺:在项目中主要负责后端开发.个人博客 · 袁勤:精通网页项目开发,前端后端都很强,在完成自己后端任务后也会积极帮助其他人的任务.个人博客 ...
随机推荐
- CF#541 D. Gourmet choice /// BFS 拓扑
题目大意: 给定n m 第一行有n个数 第二行有m个数 接下来n行每行m列 有 = < > 位于 i j 的符号表示 第一行第i个数与第二行第j个数的大小关系 1.将n+m个数 当做按顺序 ...
- 【转】深入理解Linux修改hostname
当我觉得对Linux系统下修改hostname已经非常熟悉的时候,今天碰到了几个个问题,这几个问题给我好好上了一课,很多知识点,当你觉得你已经掌握的时候,其实你了解的还只是皮毛.技术活,切勿浅尝则止! ...
- win10命令行kill进程
1. 查:netstat -ano | findstr "8080" 2. 杀:taskkill -PID 8082 -F
- [Err] 1701 - Cannot truncate a table referenced in a foreign key constraint
1.SET FOREIGN_KEY_CHECKS=0; 2.DELETE FROM ACT_RE_DEPLOYMENT where 1=1; 或者 truncate table ACT_RE_DEPL ...
- Django 框架之前
返回主目录:Django框架 内容目录: 一.Django框架之前的内容 1.1 web应用程序的架构 1.2 HTTP协议 1.3 纯手写简单web框架 一.Django框架之前d的内容 1.1 w ...
- udp - IPv4 上面的 UDP 协议.
SYNOPSIS (总览) #include <sys/socket.h> #include <netinet/in.h> udp_socket = socket(PF_INE ...
- ARM 寄存器 和 工作模式了解
一. ARM 工作模式 1. ARM7,ARM9,ARM11,处理器有 7 种工作模式:Cortex-A 多了一个监视模式(Monitor) 2. 用户模式:非特权模式,大部分任务执行在这种模式 ...
- dev中 ,usercontrol打印界面内容,打印预览和打印
首先,在对应的文件夹下面添加引用,如下图 如果没有就下载下来包. 预先在本地文件夹下面建立.frx文件,像这样的, 然后在触发事件下面写 //打印预览 private void btn_Preview ...
- python指定概率随机取值 理解np.random.seed()
python指定概率随机取值参考如下: 下面是利用 np.random.choice()指定概率取样的例子: np.random.seed(0) p = np.array([0.1, 0.0, 0.7 ...
- python_django_在views模块中操作状态保持(session)
什么叫状态保持? 就比如说我们登陆一个网站,登陆之后的当前页面显示的是登陆状态,但是我们要再跳转同一网站的其他页面,则显示的未登录状态,状态保持就是:我们在当前页面登陆后,再访问其他页面时也显示为登陆 ...