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

//需要引入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. Linux系统发行版本及其区别

    1 Linux系统组成 Linux操作系统=Linux内核+GNU软件及系统软件+必要的应用程序.下表为Linux系统各组成部分的贡献人员: Linux内核 GNU组件(gcc.bash) 其他必要应 ...

  2. Hexo+github如何搭建博客

    前言 博客有第三方平台,也可以自建,比较早的有博客园.CSDN,近几年新兴的也比较多诸如:WordPress.segmentFault.简书.掘金.知乎专栏.Github Page 等等. 这次我要说 ...

  3. 下载cv2时下载失败或下载成功却无法使用怎么办

    最近我也在安装cv2的时候遇到了奇怪的问题,导致在安装cv2的时候无法使用.我在网上查了各种资料,虽然都对的,但都不太全面.本文就把安装cv2时可能遇到的各种奇怪的问题的解决方案做一个总结,供大家参考 ...

  4. 前端每日实战：151# 视频演示如何用纯 CSS 创作超能陆战队的大白

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ReGRaO 可交互视频 此视频是可 ...

  5. day06可变与不可变类型，if判断，运算符

    1:可变不可变类型 2.什么是条件?什么可以当做条件?为何要要用条件? 显式布尔值:True.False 隐式布尔值:所有数据类型,其中0.None.空为假 3:逻辑运算符:用来 # not. and ...

  6. 新建eclipse工作空间的常用设置

    1.设置字体: Window->Preferences->(可以直接搜索font)General -> Appearance ->Colors and Fonts --> ...

  7. selenium 操作 获取动态页面数据

    # selenium from selenium import webdriver import time driver_path = r"G:\Crawler and Data\chrom ...

  8. 029.核心组件-Controller Manager

    一 Controller Manager原理 1.1 Controller Manager概述 一般来说,智能系统和自动系统通常会通过一个"控制系统"来不断修正系统的工作状态.在K ...

  9. go例子(二) 使用go语言实现数独游戏

    例子托管于github example.go package main import (     "./sudoku" ) func main() {     //var smap ...

  10. 普通索引和唯一索引如何选择（谈谈change buffer）

    假设有一张市民表(本篇只需要用其中的name和id_card字段,有兴趣的可以翻看“索引”篇,里面有建表语句) 每个人都有一个唯一的身份证号,且业务代码已经保证不会重复. 由于业务需求,市民需要按身份 ...