zoukankan      html  css  js  c++  java
  • Vue练习四十:05_05_跟随鼠标移动-展示大图

    Demo 在线地址:
    https://sx00xs.github.io/test/40/index.html
    ---------------------------------------------------------------
    ide: vscode
    文件格式:.vue
    解析:(待补)

    <template>
        <div>
            <div class="box">
                <ul>
                    <li v-for="(item,index) in lists" :key="item.src" :class="{active:item.isActive}"
                    @mouseover="handleOver(item,index)"
                    @mousemove="handleMove"
                    @mouseout="handleOut"
                    >
                        <img :src="item.src">
                    </li>
                </ul>
            </div>
            <div class="big"  v-show="show" ref="myBig">
                <div v-show="bigShow"></div>            
            </div>
        </div>
    </template>
    <script>
    export default {
        name:'Navs',
        data(){
            return{
                show:false,
                bigShow:false,            
                lists:[
                    {src:require('../assets/lesson5/shirt_1.jpg'), isActive:false},
                    {src:require('../assets/lesson5/shirt_2.jpg'), isActive:false},
                    {src:require('../assets/lesson5/shirt_3.jpg'), isActive:false},
                    {src:require('../assets/lesson5/shirt_4.jpg'), isActive:false},
                ],
                bigList:[
                    {src:require('../assets/lesson5/shirt_1_big.jpg')},
                    {src:require('../assets/lesson5/shirt_2_big.jpg')},
                    {src:require('../assets/lesson5/shirt_3_big.jpg')},
                    {src:require('../assets/lesson5/shirt_4_big.jpg')},
                ]
            }
        },    
        methods:{
            handleOver(item,index){
                var oImg=document.createElement('img');
                var img= new Image();
                img.src=oImg.src=this.bigList[index].src;
                this.$refs.myBig.appendChild(oImg);
                this.lists[index].isActive=true;
                this.show=this.bigShow=true;
                img.complete ? this.bigShow=false : ''
            },
            handleMove(){
                var newWidth= document.documentElement.offsetWidth - event.clientX;
                this.$refs.myBig.style.top=event.clientY + 20 + 'px';
                this.$refs.myBig.style.left = (newWidth < this.$refs.myBig.offsetWidth + 10 ? event.clientX - this.$refs.myBig.offsetWidth - 10 : event.clientX + 10) + 'px';
            },
            handleOut(){
                this.show=false;
                this.$refs.myBig.removeChild(this.$refs.myBig.lastChild)
            }
        }
    }
    </script>
  • 相关阅读:
    利用window.onerror收集js代码异常
    js 基础题复习
    正则12和\1的理解
    CodeReview 方法 规范
    前端的登陆 几种类型
    http协议相关知识
    javascript中apply、call和bind的区别 详细易懂
    http常见的状态码,400,401,403 前端看
    vue中使用file-saver 下载各类文件
    js下载文件到本地各种方法总结
  • 原文地址:https://www.cnblogs.com/sx00xs/p/11266244.html
Copyright © 2011-2022 走看看