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 ...
随机推荐
- 视频描述（Video Captioning）近年重要论文总结
视频描述 顾名思义视频描述是计算机对视频生成一段描述,如图所示,这张图片选取了一段视频的两帧,针对它的描述是"A man is doing stunts on his bike", ...
- dubbo与trivial超时机制的深入思考
说在前面 trivial是根据之前设计的RPC框架而来的(还在增进当中),其中较为不同的一个点为,在客户端去掉了业务线程池,因为既然都要等待,不必要再加一层. 进入正题 有在网上看到这样的信息,“之前 ...
- 树莓派3B安装OpenWrt打造超级路由器
网上有很多树莓派安装OpenWrt的教程,我这里写一下个人安装体验以及踩过的坑
- App崩溃监控
常见马虎导致崩溃 1 数组越界: 2 多线程问题,在子线程刷新UI: 3 主线程无响应,主线程超过系统规定的时间没有响应,就会被watchdog杀掉: 4 野指针: 崩溃信息的收集却并没有那么简单.因 ...
- 在WPF（core版本）中引用外部字体不可用问题说明
这几天使用WPF写软件,想引用外部字体,于是下载了字体文件: 然后在App.xaml中添加了如下代码: <FontFamily x:Key="Digital-7 Mono"& ...
- crypto-js aes加密解密
安装 npm install crypto-js --save unit.js import CryptoJS from "crypto-js"; //秘钥 const CRYPT ...
- 天坑，CSS之定位Position（六分之五）
Position定位 个人觉得position这个属性真的算是CSS的见面杀了.尤其是absolute,当年可是被虐的不轻.当然了,现在爱上了这个属性,谁用谁知道. position属性 positi ...
- sublime Text3 前端常用插件
sublime Text3 前端常用插件 - File Switching (文件切换) --- Sublime Text提供了一个非常快速的方式来打开新的文件.只要按下Ctrl+ P并开始输入你想要 ...
- PAT-字符串处理-B 1002 写出这个数 (20分)
题目: 思路: 先用字符串数组存储输入数字,然后依据num[i]-'0'对输入数字求和.然后对求和后的数字,进行分割,存储到数组中,然后遍历数组,依据存储汉语拼音的字符串二维数组进行输出 注意点: 注 ...
- 基于springcloud搭建项目-Ribbon篇(三)
这篇文章主要是介绍一下ribbon的用法,我们都知道ribbon是负载均衡,但是却不知道他是怎么样的负载均衡,怎么用,能干嘛? ● 其实,简单的说,Spring Cloud Ribbon是基于Netf ...