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

//需要引入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. 一位资深程序员大牛推荐的Java技术学习路线图

    Web应用,最常见的研发语言是Java和PHP. 后端服务,最常见的研发语言是Java和C/C++. 大数据,最常见的研发语言是Java和Python. 可以说,Java是现阶段中国互联网公司中,覆盖 ...

  2. preload & prefetch

    原文地址在 我的笔记里,觉得还行就给个 star 吧:) 关于 preload 和 prefetch 早有耳闻,知道它们可以优化页面加载速度,然具体情况却了解不多.搜索了相关的资料后对其有了些认识,在 ...

  3. 解决微信小程序视频组件层级过高的问题

    本文首发于我的个人博客:http://www.fogcrane.org 前言 在微信小程序的开发中,总有一些"VIP"组件,他们的层级,高得让人抓狂,总是凌驾于很多其他低层级组件之 ...

  4. 使用Blazor Server 线路处理程序 (circuit handler)跟踪打开的SignalR连接

    Blazor服务器允许定义线路处理程序(circuit handler)代码,该处理程序(handler)允许在更改用户线路状态时运行此代码. 线路处理程序(circuit handler)是通过从C ...

  5. 题解-[HNOI2001]遥控赛车比赛

    题解-[HNOI2001]遥控赛车比赛 前置知识:记忆化搜索.\(\texttt{Bfs}\). 参考资料 https://www.luogu.com.cn/blog/CYJian/solution- ...

  6. 【MySQL 原理分析】之 Explain & Trace 深入分析全模糊查询走索引的原理

    一.背景 今天,交流群有一位同学提出了一个问题.看下图: 之后,这位同学确实也发了一个全模糊查询走索引的例子: 到这我们可以发现,这两个sql最大的区别是:一个是查询全字段(select *),而一个 ...

  7. 开源一个使用python和pyQT实现的产测工具

    导语 之前给朋友友情开发的一个产测工具,现开源,有需要的朋友可以在这个基础上进行二次开发. 操作界面如下 主要特性 自动识别启动信息,然后进入产测写入状态 序列号和MAC地址自动按指定数目增加 每次操 ...

  8. linux 读取 USB HID鼠标坐标和点击 在 LCD上显示

    首先要,编译内核时启用了 USB HID 设备.启用了 鼠标 . 在开发板上插入usb 时会有如下提示. 可以看到,多了一个 mouse0 和 eventX 打出来的是我的 联想鼠标. 1, 在 终端 ...

  9. JAVA校内赛

    第一题: 问题描述 在计算机存储中,15.125GB是多少MB?答案提交 这是一道结果填空的题,你只需要算出结果后提交即可.本题的结果为一个整数,在提交答案时只填写这个整数,填写多余的内容将无法得分. ...

  10. 回想笔记 瞎比比 域名注册 解析绑定ip 下载证书 设置证书 重定向http到https请求

    2019.7.27 回想笔记 拥有腾讯云服务器一台 阿里云注册5元域名,进行备案 完成之后 使用解析 绑定服务器ip地址 ,使用域名可以访问到web服务器而不是通过直接暴露ip地址进行访问 证书购买 ...