js 拖拽 鼠标事件，放大镜效果
设置网站播放视频 只有一个是播放的
//需要引入jquery
var v = $("video")
v.bind("play",function(){
for(var i =0; i<v.length; i++){
(i == v.index(this))?v[i].play():v[i].pause();
}
})
设置 网站固定 导航条或者是搜索框
var box1 = document.getElementsByClassName("box1")[0];
var box2 = document.getElementsByClassName("box2")[0];
var box3 = document.getElementsByClassName("box3")[0];
var sTop
document.onscroll = function(){
sTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
// sTop >= 200?box2.classList.add("fix"):box2.classList.remove("fix"); // 实用类名
sTop >= box1.scrollHeight?box2.style.cssText="position:fixed;top:0;":box2.style.cssText="position:static;";
}
图片随屏幕滚动而跟着走
var topHeight
window.onscroll=function(){
topHeight= window.pageYOffset;
box[0].style.top = topHeight+ 100 +"px"
box[1].style.top = topHeight+ 100 +"px"
}
// 还需要给元素加一个过渡CSS3属性 transition：time;
最后一个实例 可以拖动的放大镜
<!DOCTYPE html>
<html>
<head>
<title>放大镜</title>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<style type="text/css">
html,body,head,h1 {
margin: 0;
padding: 0;
}
.container {
width: 622px;
margin: 20px;
height: 346px;
border: solid 1px #ccc;
}
.container h1 {
text-align: center;
background-color: rgba(0,0,0,.3);
cursor: pointer;
}
.smallBox {
width: 300px;
border-right: solid 1px #ccc;
margin-right: 20px;
position: relative;
float: left;
}
.shade {
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 0;
background: url(images/2.png);
display: none;
cursor: move;
}
.bigBox {
float: left;
width: 300px;
height: 300px;
overflow: hidden;
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="title">
<h1>放大镜</h1>
</div>
<div class="smallBox">
<img width="300" src="data:images/1.jpg" alt="">
<span class="shade"></span>
</div>
<div class="bigBox">
<img src="data:images/1.jpg" alt="">
</div>
</div>
<script type="text/javascript">
// 获取相关元素
var smallBox = document.getElementsByClassName("smallBox")[0];
var shade = document.getElementsByClassName("shade")[0];
var bigBox = document.getElementsByClassName("bigBox")[0];
var bigImg = bigBox.getElementsByTagName("img")[0];
var title = document.getElementsByTagName("h1")[0];
var content = document.getElementsByClassName("container")[0];
// console.log(content);
// 给标题添加一个拖拽效果
title.onmousedown = function(e){
e = e || window.event;
var x = e.offsetX;
var y = e.offsetY;
document.onmousemove = function(e){
e = e || window.event;
// 禁止文字被选中
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
content.style.marginLeft = e.clientX -x+ "px";
content.style.marginTop = e.clientY -y+ "px";
}
}
// 取消事件 必须添加两个事件取消 如果只添加前面一个会有bug
title.onmouseup = function(){
document.onmousemove = null;
}
title.onmouseout = function(){
document.onmousemove = null;
}
// 给图片添加一个放大镜效果
smallBox.onmouseenter = function(){
shade.style.display = "block";
bigBox.style.display = "block"; smallBox.onmousemove = function(e){
e = e || window.event;
// 移动的距离 = 屏幕可视区域的距离+屏幕被卷去的距离(如果在屏幕没有滚动条的时候也可以不用减去)-鼠标在盒子内的距离-图片上的遮罩矩形的长宽一半(目的是让鼠标在遮罩的正中心)
var shadeX = e.clientX + window.pageXOffset-smallBox.offsetLeft-shade.offsetWidth/2;
var shadeY = e.clientY + window.pageYOffset-smallBox.offsetTop-shade.offsetHeight/2; if(shadeX < 0) shadeX = 0;
if(shadeX >= smallBox.offsetWidth - shade.offsetWidth) shadeX = smallBox.offsetWidth - shade.offsetWidth-1; if(shadeY < 0) shadeY = 0;
if(shadeY >= smallBox.offsetHeight - shade.offsetHeight) shadeY = smallBox.offsetHeight - shade.offsetHeight-1;
shade.style.left = shadeX + "px";
shade.style.top = shadeY + "px";
// 300-100 = 200 : 800-300 = 500 ==> 也就是2.5倍
// 我用的是通过改变margin的值来移动元素 也可以通过定位移动元素
bigImg.style.marginLeft = -shadeX*2.5 +"px"
bigImg.style.marginTop = -shadeY*2.5 + "px";
}
}
smallBox.onmouseleave = function(){
shade.style.display = "none";
bigBox.style.display = "none";
} </script>
</body>
</html>
js 拖拽 鼠标事件，放大镜效果的更多相关文章
- javascript简单拖拽(鼠标事件 mousedown mousemove mouseup)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- 浅谈js拖拽
本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...
- 一步一步实现JS拖拽插件
js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...
- 原生js拖拽功能制作滑动条实例教程
拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...
- js拖拽分析
js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...
随机推荐
- java快速开发平台可视化开发表单
XJR java快速开发平台,简单的理解就是:开发人员以某种编程语言或者某几种编程语言(比如:目前流行的多种web技术,包括springboot, JPA,Druid, Activiti,Lombok ...
- 使用EventBus + Redis发布订阅模式提升业务执行性能
前言 最近一直奔波于面试,面了几家公司的研发.有让我受益颇多的面试经验,也有让我感觉浪费时间的面试经历~因为疫情原因,最近宅在家里也没事,就想着使用Redis配合事件总线去实现下具体的业务. 需求 一 ...
- .NET平台编程语言的衰败
.NET平台编程语言的衰败 JVM上的编程语言除了Java,其它还有很多,比如最近谷歌公司力捧JVM平台上的语言Kotlin.大数据用的Scala.构建系统用的Groovy..NET平台上的编程语言曾 ...
- iOS开发线程同步技术-锁
概览 1,什么是锁(临界区)? 2,常用的锁有哪些? 3,相关链接 什么是锁(临界区) 临界区:指的是一块对公共资源进行访问的代码,并非一种机制或是算法. 常用的锁有哪些? 互斥锁:是一种用于多线程编 ...
- 图解Python网络编程
返回目录 本篇索引 (1)基本原理 (2)socket模块 (3)select模块 (4)asyncore模块 (5)asynchat模块 (6)socketserver模块 (1)基本原理 本篇指的 ...
- 多道技术 进程 线程 协程 GIL锁 同步异步 高并发的解决方案 生产者消费者模型
本文基本内容 多道技术 进程 线程 协程 并发 多线程 多进程 线程池 进程池 GIL锁 互斥锁 网络IO 同步 异步等 实现高并发的几种方式 协程:单线程实现并发 一 多道技术 产生背景 所有程序串 ...
- form里面文件上传并预览
其实form里面是不能嵌套form的,如果form里面有图片上传和其他input框,我们希望上传图片并预览图片,然后将其他input框填写完毕,再提交整个表单的话,有两种方式! 方式一:点击上传按钮的 ...
- 1..Net平台的背景
一:.Net平台的背景 1. 2010之前 的PC时代的时候,互联网规模还不是特别庞大,以静态编译式语言为代表的JAVA和.Net没什么太大区别,.net以windows自居. 2. 2010年以JA ...
- java开发——Cloneable接口、clone()方法和深浅拷贝
1.实现Cloneable接口表明该类的对象是允许克隆的. 2.允许克隆的意思是:可以调用clone()方法. 3.深拷贝还是浅拷贝,取决于如何重写Object的clone()方法. 4.原对象和克隆 ...
- Flink系列之1.10版流式SQL应用
随着Flink 1.10的发布,对SQL的支持也非常强大.Flink 还提供了 MySql, Hive,ES, Kafka等连接器Connector,所以使用起来非常方便. 接下来咱们针对构建流式SQ ...