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

//需要引入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】Map总结和源码注释

    前言 Map为一个Java中一个重要的数据结构,主要表示<key, value>的映射关系对.本文包括了相关Map数据结构的总结和源码的阅读注释. HashMap 初始化,可以选择第二个初 ...

  2. 成长日记(2) Java面向对象

    本篇主要是记录自己在学习路上的笔记,如果有哪里记错了请大家直接指出 面向对象的概念 *人为抽象的一种编程模型 *面向过程 代码集中 难以维护 *类:对事物 算法 逻辑 概念等的抽象 理解成 模板 图纸 ...

  3. C#开发BIMFACE系列30 服务端API之模型对比1：发起模型对比

    系列目录     [已更新最新开发文章,点击查看详细] 在实际项目中,由于需求变更经常需要对模型文件进行修改.为了便于用户了解模型在修改前后发生的变化,BIMFACE提供了模型在线对比功能,可以利用在 ...

  4. Asp.Net Core Endpoint 终结点路由之中间件应用

    一.概述 这篇文章主要分享Endpoint 终结点路由的中间件的应用场景及实践案例,不讲述其工作原理,如果需要了解工作原理的同学, 可以点击查看以下两篇解读文章: Asp.Net Core EndPo ...

  5. 内存：你跑慢点行不行？CPU：跑慢点你养我吗？内存：我不管！（内附超全思维导图）

    主存(RAM) 是一件非常重要的资源,必须要认真对待内存.虽然目前大多数内存的增长速度要比 IBM 7094 要快的多,但是,程序大小的增长要比内存的增长还快很多.不管存储器有多大,程序大小的增长速度 ...

  6. 解决Hexo博客模板hexo-theme-next的翻页按钮不正常显示问题

    用Hexo搭了个Gitpage的博客,兴冲冲的发了11篇博文后发现翻页按钮不正常显示,显示为<i class="fa fa-angle-right"></i> ...

  7. VUE三 vue-router（路由）详解

    前端路由 根据不同的 url 地址展示不同的内容或页面,无需依赖服务器根据不同URL进行页面展示操作 优点 用户体验好,不需要每次都从服务器全部获取,快速展现给用户 缺点 使用浏览器的前进,后退键的时 ...

  8. java算法--稀疏数组

    数据结构必要知识 线性结构 线性结构是最常用的数据结构,数据元素之间存在一对一的线性关系. 线性结构有两种不同的存储结构,即顺序存储结构和链式存储结构.顺序存储的线性表称为顺序表,顺序表中的存储元素是 ...

  9. ubuntu16.04 + caffe + SSD + gpu 安装

    昨天我们买好了硬件,今天我们开始安装caffe了,我本人安装过caffe不下10次,每次都是一大堆问题,后来终于总结了关键要点,就是操作系统. 1. 千万不要用ubuntu17.10来安装, 2. 最 ...

  10. 爬虫之BeautifulSoup类

    安装:pip install BeautifulSoup4 下表列出了主要的解析器,以及它们的优缺点:看个人习惯选取自己喜欢的解析方式 # 获取html代码 import requests r = r ...