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

//需要引入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. 怎样解决使用feof（）函数时出现的问题？

    feof函数        昨天在做一个课程设计时,一个函数的功能是将文件中的数据一条条的读到链表中去.既然不确定有多少条数据,那只能借助feof()函数了,本来文件部分就没学好,也就知道这一个方法. ...

  2. mongodb 修改oplogSize

    oplog是local库下的一个固定集合,Secondary就是通过查看Primary的oplog这个集合来进行复制的.每个节点都有oplog,记录从主节点复制过来的信息,这样每个成员都可以作为同步源 ...

  3. 自动清理IIS log 日志脚本

    系统环境:windows server 2012 r2 IIS 版本:IIS8 操作实现清理IIS log File 脚本如下: @echo off ::自动清理IIS Log file set lo ...

  4. 在命令行中使用pushd和popd进行快速切换目录

    当频繁的切换三个或三个以上的目录的时候,可以使用pushd命令.每次使用目录路径被存储在栈中,然后用pushd和popd操作在目录之间切换. 例如: [root@gameserver1 ~]# pus ...

  5. spring——AOP原理及源码（二）

    回顾: 在上一篇中,我们提到@EnableAspectJAutoProxy注解给容器中加入了一个关键组件internalAutoProxyCreator的BeanDefinition,实际类型为 An ...

  6. Jira字段配置最佳实践

    在我们创建Jira时,Jira上会填写各式各样的字段,不同的字段对于不同的角色人员,使用方式也是不同的,通过这篇文章,希望大家能够对Jira使用有更深刻的认识. 为什么需要严格规范? 易于开发,测试, ...

  7. Layabox 预制体prefab使用

    //腊鸭官方api不详细系列之ui预制体 // 创建预制体文件,随便拖一个场景中的预制体到 Assets的任意文件夹中,要规范的话则放在Prefab中 // 上一步操作完后就可以在文件夹中看到.pre ...

  8. Nginx之负载均衡配置（一）

    前文我们聊了下nginx作为反向代理服务器,代理后端动态应用服务器的配置,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12430543.html:今天我们来聊 ...

  9. MyBatis-Plus不写任何resultMap和SQL执行一对一、一对多、多对多关联查询

    对于一对一,一对多的关联查询,Mybatis-Plus官方示例(mybatis-plus-sample-resultmap)在处理时,需要编写查询方法及配置resultMap,并且写SQL. 为了简化 ...

  10. Linux下MongoDB单实例的安装和配置详解

    推荐网站 MongoDB官网:http://www.mongodb.org/ MongoDB学习网站:http://www.runoob.com/mongodb 一.创建MongoDB的资源目录和安装 ...