轮播图

最新推荐文章于 2020-02-10 00:41:48 发布

weixin_44740410

最新推荐文章于 2020-02-10 00:41:48 发布

阅读量110

点赞数

本文链接：https://blog.csdn.net/weixin_44740410/article/details/89046047

版权

旋转木马:
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>旋转木马轮播图</title>
  <link rel="stylesheet" href="css/css.css"/>
  <script src="common.js"></script>
  <script>
    //
    var config = [
      {
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
      },//0
      {
        width: 600,
        top: 70,
        left: 0,
        opacity: 0.8,
        zIndex: 3
      },//1
      {
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
      },//2
      {
        width: 600,
        top: 70,
        left: 600,
        opacity: 0.8,
        zIndex: 3
      },//3
      {
        width: 400,
        top: 20,
        left: 750,
        opacity: 0.2,
        zIndex: 2
      }//4

    ];

   
  </script>

</head>
<body>
<div class="wrap" id="wrap">
  <div class="slide" id="slide">
    <ul>
      <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
    </ul>
    <div class="arrow" id="arrow">
      <a href="javascript:;" class="prev" id="arrLeft"></a>
      <a href="javascript:;" class="next" id="arrRight"></a>
    </div>
  </div>
</div>
<script src="common.js" ></script>
<script>
  //获取元素
  var slide=my$("slide");
  var list=slide.getElementsByTagName("li");
  //鼠标移入,显示左右焦点按钮
  slide.οnmοuseοver=function () {
      animate(my$("arrow"),{"opacity":1});
  }
  slide.οnmοuseοut=function () {
      animate(my$("arrow"),{"opacity":0});
  }

  //将li散开--将每个li放在对应的位置
  function assign(){
      for (var i=0;i<list.length;i++){
          //动画效果,调用animate
          animate(list[i],config[i]);
      }
  }
  assign();
  //点击右边按钮,将li更改位置
  my$("arrRight").οnclick=function () {
      config.push(config.shift());
      //li的位置重新设置--散开
      assign();
  }
  my$("arrLeft").οnclick=function () {
      config.unshift(config.pop());
      //li的位置重新设置--散开
      assign();
  }
</script>
</body>
</html>

图片跟着鼠标飞最终版:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            position: absolute;
            margin:100px;
        }
    </style>
</head>
<body style="height:2000px;">
<img src="images/tianshi.gif" height="80" width="96" id="im"/>

<script src="common.js"></script>
<script>
    var evt = {
        getEvent: function (evt) {
            return window.event || evt;
        },
        getClientX: function (evt) {
            return this.getEvent(evt).clientX;
        },
        getClientY: function (evt) {
            return this.getEvent(evt).clientY;
        },
        getScrollLeft: function () {
            return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
        },
        getScrollTop: function () {
            return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        },
        getPageX: function (evt) {
            return this.getEvent(evt).pageX ? this.getEvent(evt).pageX : this.getClientX(evt) + this.getScrollLeft();
        },
        getPageY: function (evt) {
            return this.getEvent(evt).pageY ? this.getEvent(evt).pageY : this.getClientY(evt) + this.getScrollTop();
        }
    }

    document.onmousemove = function (e) {
        my$("im").style.left = evt.getPageX(e)-100 + "px";
        my$("im").style.top = evt.getPageY(e)-100 + "px";
    }
</script>
</body>
</html>

拖拽文本框:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }

        ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {
            padding: 0px;
            margin: 0px;
        }
        .login {
            width: 512px;
            position: absolute;
            border: #ebebeb solid 1px;
            height: 280px;
            left: 50%;
            right: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            margin-left: -250px;
            margin-top: 140px;
            display: none;
        }

        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;
            /*css控制页面文字不能被选中user-select:none;*/
        }

        .login-input-content {
            margin-top: 20px;
        }

        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }

        .login-bg {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: #000000;
            /*这一条代码是为了IE浏览器实现不透明度为80% 因为如果用 opacity:0.8; IE会不支持的*/
            filter: alpha(opacity=30);
            -moz-opacity: 0.3;
            -khtml-opacity: 0.3;
            opacity: 0.3;
            display: none;
        }

        a {
            text-decoration: none;
            color: #000000;
        }

        .login-button a {
            display: block;
        }

        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }

        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }

        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }

        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }


    </style>
</head>
<body>
<div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>
<div id="login" class="login">
    <div id="title" class="login-title">登录会员
        <span>
        <a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a>
    </span>
    </div>
    <div class="login-input-content">
        <div class="login-input">
            <label>用户名：</label>
            <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
        </div>
        <div class="login-input">
            <label>登录密码：</label>
            <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
        </div>
    </div>
    <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div><!--登录框-->
<div id="bg" class="login-bg"></div><!--遮挡层-->
<script src="common.js"></script>
<script>
    my$("link").addEventListener("click",function () {
        my$("login").style.display="block";
        my$("bg").style.display="block";
    },false);

    my$("closeBtn").addEventListener("click",function () {
        my$("login").style.display="";
        my$("bg").style.display="";
    },false);
    my$("title").οnmοusedοwn=function (e) {
        var spaceX=e.clientX-my$("login").offsetLeft;
        var spaceY=e.clientY-my$("login").offsetTop;
        document.οnmοusemοve=function (e) {
            my$("login").style.left=e.clientX-spaceX+250+"px";
            my$("login").style.top=e.clientY-spaceY-140+"px";
        }
    };
    my$("title").οnmοuseup=function (e) {
        document.οnmοusemοve=null;
    };
</script>







</body>
</html>

放大镜:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>哈哈</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="small"><!--小层-->
        <img src="images/small.png" width="350" alt=""/>
        <div class="mask"></div><!--遮挡层-->
    </div><!--小图-->
    <div class="big"><!--大层-->
        <img src="images/big.jpg" width="800" alt=""/><!--大图-->
    </div><!--大图-->
</div>
<!--导入外部的js文件-->
<script src="common.js"></script>
<script>
    var box=my$("box");
    var small=box.children[0];
    var mask=small.children[1];
    var big=box.children[1];
    var bigImg=big.children[0];

    small.οnmοuseοver=function () {
        big.style.display="block";
        mask.style.display="block";
    };
    small.οnmοuseοut=function () {
        big.style.display="";
        mask.style.display="";
    };
    small.οnmοusemοve=function (e) {
        var x=e.clientX;
        var y=e.clientY;
        x=x-100-mask.offsetWidth/2;
        y=y-100-mask.offsetHeight/2;
        x=x<0? 0:x;
        y=y<0? 0:y;
        x=x>small.offsetWidth-mask.offsetWidth?small.offsetWidth-mask.offsetWidth:x;
        y=y>small.offsetHeight-mask.offsetHeight?small.offsetHeight-mask.offsetHeight:y;

        mask.style.left=x+"px";
        mask.style.top=y+"px";
        //设置大图的移动距离
        var maxX=bigImg.offsetWidth-big.offsetWidth;
        var maxY=bigImg.offsetHeight-big.offsetHeight;
        var bigImgX=x*maxX/(small.offsetWidth-mask.offsetWidth);
        var bigImgY=y*maxY/(small.offsetHeight-mask.offsetHeight);
        bigImg.style.marginLeft=-bigImgX+"px";
          bigImg.style.marginTop=-bigImgY+"px";
    }
</script>
</body>
</html>

附件:common,js

/**
 * Created by Administrator on 2017-09-18.
 */

function my$(id) {
    return document.getElementById(id);
}

//设置任意元素的中间的文本内容
function setInnerText(element,text) {
    if(typeof element.textContent=="undefined"){
        element.innerText=text;
    }else{
        element.textContent=text;
    }
}
//获取任意元素的中间的文本内容
function getInnerText(element) {
    if(typeof element.textContent=="undefined"){
        return element.innerText;
    }else{
        return element.textContent;
    }
}


//获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {
    if(element.firstElementChild){//true--->支持
        return element.firstElementChild;
    }else{
        var node=element.firstChild;//第一个节点
        while (node&&node.nodeType!=1){
            node=node.nextSibling;
        }
        return node;
    }
}
//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
    if(element.lastElementChild){//true--->支持
        return element.lastElementChild;
    }else{
        var node=element.lastChild;//第一个节点
        while (node&&node.nodeType!=1){
            node=node.previousSibling;
        }
        return node;
    }
}

//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
function addEventListener(element,type,fn) {
    //判断浏览器是否支持这个方法
    if(element.addEventListener){
        element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,fn);
    }else{
        element["on"+type]=fn;
    }
}

//获取任意的元素的任意属性---带单位
function getStyle(element, attr) {
    return window.getComputedStyle ? getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}


/**
 * 变速动画函数添加任意一个属性
 * @param element  要移动的元素
 * @param json  {"attr1":target1，"attr2":target2}
 * @param fn  回调函数
 *
 * "width":400, "height":300, "left":400
 */
function animate(element, json, fn) {
    //第一步，清除定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        var flag = true;//默认所有的属性达到目标值
        for (var attr in json) {
            //判断属性是不是opacity
            if (attr == "opacity") {
                //获取当前元素的attr这个属性的属性值
                var current = getStyle(element, attr) * 100;//增大100倍
                //确定每一次走多少步
                var target = json[attr] * 100;//目标值也增大100倍
                var step = (target - current) / 10;//有正负
                //step 取整
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //走完一次后，当前位置发生改变
                current += step;
                element.style[attr] = current / 100;
            } else if (attr == "zIndex") {//判断是不是z-index
                //直接改变层级的属性
                element.style[attr] = json[attr];
            } else {
                //普通属性
                //获取当前元素的attr这个属性的属性值
                var current = parseInt(getStyle(element, attr));//获取数字类型，进行运算=================
                //确定每一次走多少步
                target=json[attr];
                var step = (target - current) / 10;//有正负
                //step 取整
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //走完一次后，当前位置发生改变
                current += step;
                element.style[attr] = current + 'px';//========================
            }
            //判断否到当前位置
            if (target != current) {
                flag = false;
            }
        }
        if (flag) {
            //清除定时器
            clearInterval(element.timeId);
            if (fn) {
                fn();
            }
        }
        //测试代码：
        console.log("目标位置：" + json[attr] + ",当前位置：" + current + ",每次移动的步数" + step);
    }, 20);
}