Jquery css样式的设计

最新推荐文章于 2023-06-15 11:03:03 发布

无盐海

最新推荐文章于 2023-06-15 11:03:03 发布

阅读量991

点赞数

分类专栏： JQuery CSS 文章标签： Jquery css样式的设计

本文链接：https://blog.csdn.net/Fanbin168/article/details/39430261

版权

JQuery 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

<1>

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () { border-radius","5px"
            $("div").css("background", "Red").css("width", "20").css("height", "35").css("margin", "30px").css("border-radius","5px" )
             //border-radius","5px"是圆边
        })
    </script>

<2>

<html>
<head>
    <title></title>
    <script src="jquery-2.1.3.js"></script>
    <style type="text/css">
        .divClass {
        /*border:1px solid red ;*/
        border-width:1px;
        border-style:solid;
        border-color:red;
        }
    </style>
</head>
<body>
    <div>中国</div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("div").height(100).width(100).addClass("divClass"); //用jquery来设置div的宽度和高度

        //或者也可以下面这种方式来实现

        $("div").css("height", 100).css("width", 100).addClass("divClass"); //用css来设置div的宽度和高度

        //或者也可以下面这种方式来实现

        $("div").css({ "height": "100", "width": "100" }).addClass("divClass"); //在一个css中设置多种样式

        //或者也可以下面这种方式来实现

        $("div").height(100).width(100).css("border-width", "1px").css("border-style", "solid").css("border-color", "red");


        alert($("div").height()); //如果height()括号里没有值，就获取高度，如果有值，就是设置高度

        alert($("div").width());  //如果width()括号里没有值，就获取宽度，如果有值，就是设置宽度
    })
</script>

在现代的浏览器中，他们已经自带了超链接提示，只需要在超链接中加入title属性就可以了。然而这个提示效果的响应速度是非常缓慢的，考虑到良好的人机交互，需要的是当鼠标移动到超链接那一瞬间就提示，这时候就需要移除<a>标签的title提示效果，自己动手做一个类似的功能的提示。代码如下

其实就是一个鼠标跟随的效果

<html>
<head>
    <title></title>
    <script src="jquery-2.1.3.js"></script>
</head>
<body>
    <div>
        <a href="http://www.baidu.com" title="百度" >百度</a>
        <a href="http://www.sohu.com" title="搜狐">搜狐</a>
        <a href="http://www.qq.com" title="腾讯">腾讯</a>    
    </div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("div > a").mouseenter(function (e) {
            
            var a_titleRemove = this
            
            //注意：style=position:absolute;表示绝对定位。这句一定不能，少了这个div就不能跟随鼠标移动了
            var addDiv = "<div id=tooltip style=position:absolute;>" + this.title + "</div>" //创建用于“提示”的<div>元素

            $("body").append(addDiv); //将它添加到<body>中

            $("#tooltip").css({ "top": e.pageY + "px", "left": e.pageX + "px" }).show("fast"); //设置提示div的X坐标和Y坐标，变将它的显示速度设为快
        }).mouseleave(function () {
            $("#tooltip").remove(); //鼠标离开，移除提示div
        })
    })
</script>

无盐海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Jquery css样式的设计

$(function () { border-radius","5px" $("div").css("background", "Red").css("width", "20").css("height", "35").css("margin", "30px").css("border-radius","5px" )// border-radius
复制链接

扫一扫