js+css3模仿windows10日历鼠标悬停选择特效

来源:https://www.sucaihuo.com/js/5259.html 2021-04-10 11:01浏览(55) 收藏

js+css3模仿windows10日历鼠标悬停选择特效,不是日历功能,是样式,代码比较精简,值得学习。
js+css3模仿windows10日历鼠标悬停选择特效
分类:css3 难易:初级
查看演示 下载资源: 0 下载资源 下载积分: 20 积分

js代码

<script>
    var mainDom = document.getElementById('main')
    var floatDiv = document.getElementById('floatDiv')
    var txtInfo = document.getElementById('txtInfo')

    // 悬浮阴影
    function floatSharw(event){
        // console.log(event.offsetX, event.offsetY)
        var x = event.clientX - 100
        var y = event.clientY - 100
        floatDiv.style.top = y
        floatDiv.style.left = x
        txtInfo.innerText = 'X:'+x+',Y:'+y
    }

    // 初始化
    function init(){
        console.log(1)
        for(var i=0; i<90; i++){
            var div = document.createElement('div')
            div.className = 'mainDiv'
            div.innerText = i
            document.getElementById('mainContent').appendChild(div)
        }
    }
    init()
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2