图片文字随鼠标移入移出方向显示 -《狗嗨默示录》-

最新推荐文章于 2024-05-03 11:47:20 发布
weixin_30263277
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量114
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/LiGoHi/p/7289405.html
版权
<!-- 图片文字随鼠标移入移出方向显示 -->
<!DOCTYPE html>
<html lang="en">  <!-- 根节点目录标签 -->
    <head>  <!-- 头部 -->
        <!-- 网页文档三要素 -->
        <meta charset="UTF-8" >
        <meta name="keywords" content="关键词：提供给浏览器搜索网站" >
        <meta name="description" content="描述：对网页内容的大概介绍" >
        <title>鼠标移入移出</title>
        <style> /* css样式 */
            *{ /*通配符：选择到所有的标签元素*/
                margin:0; /*外边距*/
                padding:0; /*内边距*/
            }
            body{ /*标签选择器*/
                background:#434343;
            }
            #box {/*# id选择器 */
                width:1416px; /*宽度*/
                height:auto; /*高度*/
                background: #222; /*背景颜色*/
                margin:50px auto; /*上下50px 左右自动居中*/
                box-shadow:0 0 8px #fff; /*边框阴影 水平偏移 垂直偏移 模糊度 颜色*/
                padding:15px;
                overflow:hidden; /*超出隐藏*/
            }
            #box ul li{ /*混合选择器*/
                position:relative;/*相对定位：参考物 相对于自身定位*/
                list-style:none; /*去除小黑点*/
                width:320px;
                height:320px;
                border:2px solid #ccc; /*边框线：宽度 类型（实心） 颜色*/
                float:left; /*浮动：与父元素左对齐显示*/
                margin:15px;
                overflow:hidden; /*超出隐藏*/
            }
            #box ul li img{
                width:320px;
                height:320px;
            }
            #box ul li div.text{
                position:absolute; /*绝对定位:相对于拥有定位属性(relative/absolute/fixed)的最近的父元素定位的 */
                /*left:0; !*距离参考物左端的距离*!*/
                /*top:0; !*距离参考物上端的距离*!*/
                width:320px;
                height:320px;
                background:url("beautifulfood/背景.png");
                color:#434343;
                padding:0;
                /*display:none;*/
            }
            div.text h3{
                line-height:40px; /*行高*/
                margin-top:60px;
                font-size:40px; /*文本尺寸*/
                border-bottom:1px dashed #fff;
                text-align:center; /*文本对齐方式：居中*/
            }
            div.text p{
                font-size:30px;
                font-family:SimSun-ExtB;
                margin-top:15px;
                text-align:center;
                color:#fff;
            }
            div.text a{
                width:90px;
                height:40px;
                background:#33ffff;
                color:#6960EC;
                text-decoration:none; /*去除默认下划线*/
                font-size:20px;
                line-height:40px;
                text-align:center;
                vertical-align:center;
                border-radius:10px;
                margin:20px auto 0;
                display:block;
            }
        </style>
    </head>
    <body> <!-- 身体 可视化标签 -->
        <div id="box"> <!-- div盒子模型标签 宽度 高度 位置 背景 边框（css样式） -->
            <ul> <!-- 无序列表标签 -->
                <li> <!-- image四要素：width height src alt -->
                    <img src="beautifulfood/花式米饭.jpg" width="320" height="320" alt="解释说明">
                    <div class="text">
                        <h3>花式米饭</h3>
                        <p>花式米饭真的很好吃</p>
                        <a href="#">查看详情</a>
                    </div>
                </li>
                <li>
                    <img src="beautifulfood/腊肉焖米饭.jpg" width="320" height="320" alt="解释说明">
                    <div class="text">
                        <h3>腊肉焖米饭</h3>
                        <p>腊肉焖米饭真的很好吃</p>
                        <a href="#">查看详情</a>
                    </div>
                </li>
                <li>
                    <img src="beautifulfood/米饭煎饼.jpg" width="320" height="320" alt="解释说明">
                    <div class="text">
                        <h3>米饭煎饼</h3>
                        <p>米饭煎饼真的很好吃</p>
                        <a href="#">查看详情</a>
                    </div>
                </li>
                <li>
                    <img src="beautifulfood/米饭培根卷.jpg" width="320" height="320" alt="解释说明">
                    <div class="text">
                        <h3>米饭培根卷</h3>
                        <p>米饭培根卷真的很好吃</p>
                        <a href="#">查看详情</a>
                    </div>
                </li>
                <li>
                    <img src="beautifulfood/米饭披萨.jpg" width="320" height="320" alt="解释说明">
                    <div class="text">
                        <h3>米饭披萨</h3>
                        <p>米饭披萨真的很好吃</p>
                        <a href="#">查看详情</a>
                    </div>
                </li>
                <li>
                    <img src="beautifulfood/米饭三明治.jpg" width="320" height="320" alt="解释说明">
                    <div class="text">
                        <h3>米饭三明治</h3>
                        <p>米饭三明治真的很好吃</p>
                        <a href="#">查看详情</a>
                    </div>
                </li>
                <li>
                    <img src="beautifulfood/小鸡米饭团.jpg" width="320" height="320" alt="解释说明">
                    <div class="text">
                        <h3>小鸡米饭团</h3>
                        <p>小鸡米饭团真的很好吃</p>
                        <a href="#">查看详情</a>
                    </div>
                </li>
                <li>
                    <img src="beautifulfood/日式米饭丸子.jpg" width="320" height="320" alt="解释说明">
                    <div class="text">
                        <h3>日式米饭丸子</h3>
                        <p>日式米饭丸子真的很好吃</p>
                        <a href="#">查看详情</a>
                    </div>
                </li>
                <li>
                    <img src="beautifulfood/泰式芒果糯米饭.jpg" width="320" height="320" alt="解释说明">
                    <div class="text">
                        <h3>泰式芒果糯米饭</h3>
                        <p>泰式芒果糯米饭真的很好吃</p>
                        <a href="#">查看详情</a>
                    </div>
                </li>
                <li>
                    <img src="beautifulfood/鲜虾黄金小米饭.jpg" width="320" height="320" alt="解释说明">
                    <div class="text">
                        <h3>鲜虾黄金小米饭</h3>
                        <p>鲜虾黄金小米饭真的很好吃</p>
                        <a href="#">查看详情</a>
                    </div>
                </li>
                <li>
                    <img src="beautifulfood/雪菜香肠炒米饭.jpg" width="320" height="320" alt="解释说明">
                    <div class="text">
                        <h3>雪菜香肠炒米饭</h3>
                        <p>雪菜香肠炒米饭真的很好吃</p>
                        <a href="#">查看详情</a>
                    </div>
                </li>
                <li>
                    <img src="beautifulfood/芝麻米饭饼.jpg" width="320" height="320" alt="解释说明">
                    <div class="text">
                        <h3>芝麻米饭饼</h3>
                        <p>芝麻米饭饼真的很好吃</p>
                        <a href="#">查看详情</a>
                    </div>
                </li>
            </ul>
        </div>
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script>
            //alert($); //弹出jq的代理对象$
            //$("#box ul li") 获取所有的li标签
            $("#box ul li").hover(function(ev){ //鼠标悬停在上面实现什么功能
                //console.log($(this)); 鼠标移动触发事件对象
                //move(ev);
                move.call(this,ev,true); //用call方法更改this的作用域
            },function(ev){ //鼠标移开实现什么功能
                move.call(this,ev,false);
            });
            function move(ev,bool){
                //获取li的上下左右的偏移
                //offset()方法只能获取top和left
                console.log($(this));
                var T=$(this).offset().top, //获取li上偏移量
                    B=T+$(this).height(),
                    L=$(this).offset().left,
                    R=L+$(this).width();
                //获取鼠标的坐标位置
                var x=ev.pageX,
                    y=ev.pageY;
                //计算并比较出最小值
                var sT=Math.abs(y-T), //取绝对值
                    sB=Math.abs(y-B),
                    sL=Math.abs(x-L),
                    sR=Math.abs(x-R);
                //比较出距离最小值
                var min=Math.min(sT,sB,sL,sR);
                //判断往距离最小的一边移动出来
                switch(min)
                {
                    case sT: //sT为最小值，从上移出
                        //先将div.text定位到上面去然后再动画移出
                        if (bool) {
                            $(this).find("div.text").css({
                                left:0,
                                top:'-320px'
                            }).animate({top:0},200);} //在200ms内移动出来
                        else{
                            $(this).find("div.text").animate({top:'-320px'},200);}
                        break;
                    case sB: //sB为最小值，从下移出
                        //先将div.text定位到下面去然后再动画移出
                        if (bool) {
                            $(this).find("div.text").css({
                                left:0,
                                top:'320px'
                            }).animate({top:0},200);} //在200ms内移动出来
                        else{
                            $(this).find("div.text").animate({top:'320px'},200);}
                        break;
                    case sL: //sL为最小值，从左移出
                        //先将div.text定位到左面去然后再动画移出
                        if (bool) {
                            $(this).find("div.text").css({
                                left:'-320px',
                                top:0
                            }).animate({left:0},200);} //在200ms内移动出来
                        else{
                            $(this).find("div.text").animate({left:'-320px'},200);}
                        break;
                    case sR: //sR为最小值，从右移出
                        //先将div.text定位到右面去然后再动画移出
                        if (bool) {
                            $(this).find("div.text").css({
                                left:'320px',
                                top:0
                            }).animate({left:0},200);} //在200ms内移动出来
                        else{
                            $(this).find("div.text").animate({left:'320px'},200);}
                        break;
                }
            }
        </script>
    </body>
</html>
效果图：
转载于:https://www.cnblogs.com/LiGoHi/p/7289405.html
weixin_30263277
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片文字随鼠标移入移出方向显示 -《狗嗨默示录》-

<!DOCTYPE html><html lang="en">  <head>   <meta charset="UTF-8" ...
复制链接

扫一扫