• 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>
  • 相关阅读:
    2016-5-6
    PE文件格式
    CheatEngine-内存修改
    ollydbg教程-动态调试
    IDA教程-静态反编译
    JavaFX常用汇总
    settings.xml样例文件
    Cassandra安装配置
    Linux安装配置相关
    Dom4j-读写xml
  • 原文地址:https://www.cnblogs.com/sx00xs/p/11266244.html
Copyright © 2020-2023  润新知