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="images/1.jpg" alt="">
<span class="shade"></span>
</div>
<div class="bigBox">
<img src="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>
