设置网站播放视频 只有一个是播放的

//需要引入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 拖拽 鼠标事件，放大镜效果的更多相关文章

  1. javascript简单拖拽(鼠标事件 mousedown mousemove mouseup)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  3. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  5. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  6. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  7. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

  8. 原生js拖拽功能制作滑动条实例教程

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...

  9. js拖拽分析

    js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...

随机推荐

  1. JavaScript逻辑分支switch 练习题

    1.输入月份,显示当月的天数, 利用case穿透简化代码  var month = prompt("请输入月份"); var year = prompt("请输入年份&q ...

  2. docker RPM包安装

    1. 下载 docker RPM包 docker 使用的系统是  Centos 7.6 基础设施服务器 # wget https://download.docker.com/linux/centos/ ...

  3. Samtec与Neoconix达成合作并和II-VI推出新产品

    序言:Samtec近日动作不断, 近日Samtec与Neoconix达成合作并和II-VI推出新产品,以下是详细内容. Samtec与Neoconix签订Neoconix PCBeam 技术授权协议, ...

  4. Python第一周基本语句学习整理

    目录 Python第一周基本语句学习整理 一.字符串切割 二.体重单位转换 三.计算器的实现 四.猜年龄游戏 Python第一周基本语句学习整理 一.字符串切割 代码实现: s = 'luowenxi ...

  5. linux安装国产数据库（金仓数据库，达梦数据库，南大通用数据库）

    今天在公司做的任务是,在Linux的环境下安装三种数据库,结果一种数据库也没有安装好,首先遇到的问题是安装南大通用数据库遇到安装的第五步,就出现问题了,问题是Gbase SDK没有安装成功,以及Gba ...

  6. 《自拍教程36》段位三_Python面向对象类

    函数只能面向过程,来回互相调用后顺序执行, 简单的编码项目,还能应付的过来, 复杂的大型项目,调用多了,就会乱. 如何才能不乱呢,可尝试下, 面向对象类的概念, 将现实世界的事物抽象成对象,将现实世界 ...

  7. 利用Java实现指定文件夹下的照片以自定义格式移动

    前几天本猿的大学同学,一个漂亮的小姐姐工作时遇到了一个问题,她的需求是,在公司局域网的电脑上下载大量的图片重命名成指定得1.2.3.....以此类推,需要当天完成,我就临时给写了一个小demo. 我的 ...

  8. const 详解

    ​ 简单分类:          常变量        const 类型 变量名  或者   类型 const  变量名          常引用        const 类型& 引用名   ...

  9. React hooks详解

    此篇文章仅是对hooks入门的总结,老鸟略过吧~ React从16.8.X以后增加了一个新特性,react hooks 让我们看看这个新特性又带来了哪些惊喜呢~以下内容我们采取不同方式创建组件来进行对 ...

  10. 如何查看QQ坦白说来自谁

    近两天QQ新功能的坦白说开始席卷朋友圈,一个醒目的小窗就这样明晃晃出现在QQ对话列表"有人对你说:--"下面我们就来整理一下怎么看到是谁给你发送的坦白说呢? 方法一: 此方法仅限于 ...