• 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>
  • 相关阅读:
    Flexbox 可视化属性
    latex 数学公式
    迭代器模式 rx 应用
    小程序开发 easy-less 配置
    react-devtool 消息处理渲染 源码理解
    csrf jsonp
    koa1 源码详解1
    Immutable api example
    es6 ajax
    lodash 替换 underscore
  • 原文地址:https://www.cnblogs.com/sx00xs/p/11266244.html
Copyright © 2020-2023  润新知