2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

 2017/10/21 22:47:03  Z?  程序员俱乐部  我要评论(0)
  • 摘要:css代码背景与前景background-color:#0000;背景色,样式表优先级高background-image:url(路径);设置背景图片background-attachment:fixed;背景固定,不随字体滚动background-attachment:scroll;背景是随着字体滚动的background-repeat:no-repeat;no-repeat不平铺repeat平铺repeat-x横向平铺repeat-y纵向平铺background-position
  • 标签:事件 常用 图片 代码 鼠标 jQuery

css代码

 

背景与前景

background-color:#0000;                           背景色,样式表优先级高

background-image:url(路径);                     设置背景图片

background-attachment:fixed;                   背景固定,不随字体滚动

background-attachment:scroll;                  背景是随着字体滚动的

background-repeat:no-repeat ;                 no-repeat   不平铺   repeat  平铺  repeat-x  横向平铺    repeat-y   纵向平铺

background-position:center;                     背景图居中, 设置背景图位置的时候一定把repeat设为no-repeat

 

 重要部分

 

全部透明度

opacity:0.7;

过渡效果

transition:设置秒数;

圆角

border-radius:设置像素值;

阴影

box-shadow: 5px(向右) 5px(向下) 5px(虚化)加颜色;

text-shadow:sew(如上加像素值);文字阴影

转动角度

tramsform:skew(可以选择转动方式)(加转动的角度)

无序列表

<ul><li><li></ul>

顶部:top

底部:bottom

左:left

右:right

padding+方向可以只改一侧(input用的多一些)

margin(边距)

 

    鼠标移入触发

    a:hover{

          }

    访问时候样式

     a:link{

          }

     访问后样式

     a:visited{

          }

       被选择的链接样式

     a:active{

         }

 

 

JQuery代码

 

   鼠标移入事件触发

       mouseover()

    鼠标移出事件触发

        mouseout()

    鼠标点击事件触发

        click()

    鼠标双击事件触发

       dbclick()

    按下鼠标事件触发

       mousedown()

    松开鼠标事件触发

       mouseup()

 

 

 

    JQuyer代码实例

 

   微信 、微博、授权 、注册商标鼠标点击淡入淡出效果

  如果想换鼠标移入就有效果的话就把click()换成mouseover()

   每个都要有个按钮,比如<div></div> <input  type="button"  />...

   也可以不取值,不取值的话就在每个<div></div>中加入id,可以直接用"#"来取id名

   eq()为参数,注:(eq()是从零开始)

    weixin = $(".weixin")
    weibo = $(".weibo")
    shouquan = $(".shouquan")
    zhuce = $(".zhuce")
    baseb = $(".base-b")
    baseb.eq(3).ready(function() {
        baseb.eq(3).click(function() {
            zhuce.fadeToggle("slow")
        })
    })
    baseb.eq(4).ready(function() {
        baseb.eq(4).click(function() {
            shouquan.fadeToggle("slow")
        })
    })
    baseb.eq(5).ready(function() {
        baseb.eq(5).click(function() {
            weibo.fadeToggle("slow")
        })
    })
    baseb.eq(6).ready(function() {
        baseb.eq(6).click(function() {
            weixin.fadeToggle("slow")
        })
    })


     图片轮播代码

   首先要设置几张图片,我这里设置的是三张图片

    按钮设置的是轮播或者自己点击时背景颜色会变

   代码如下:

   toplogo = $(".top-logo");/ / toplogo 为图片,注:(前面的名字不要加"-",不要成top-logo)
    gap = $(".gap-b");/ / gap 为按钮
    ws = 1; / / 从第一张开始循环
    gap.eq(0).css("background-color", "#A52A2A")

    function move() {
        if(ws != 3) {
            toplogo.stop();
            toplogo.animate({
                    marginLeft: ws * (-1349) + "px"
                },
                500,
                function() {
                    ws++;
                })
        }
        if(ws == 3) {
            toplogo.stop();
            toplogo.animate({
                    marginLeft: 0 + "px"
                },
                500,
                function() {
                    ws = 1;
                    gap.css("background-color", "white")
                    gap.eq(0).css("background-color", "#A52A2A")
                })
        }

        if(ws == 0) {
            gap.css("background-color", "white")
            gap.eq(0).css("background-color", "#A52A2A")
        }
        if(ws == 1) {
            gap.css("background-color", "white")
            gap.eq(1).css("background-color", "#A52A2A")
        }
        if(ws == 2) {
            gap.css("background-color", "white")
            gap.eq(2).css("background-color", "#A52A2A")
        }

    }

 

     图片自动轮播代码

   代码如下:

 window.setInterval(move, 2500)/ / move后面设置毫秒
    gap.eq(1).mouseover(function() {
        gap.css("background-color", "white")
        gap.eq(1).css("background-color", "#A52A2A")

    })
    gap.eq(2).mouseover(function() {
        gap.eq(2).css("background-color", "#A52A2A")
        gap.eq(1).css("background-color", "white")
        gap.eq(0).css("background-color", "white")
    })
    gap.eq(0).mouseover(function() {
        gap.eq(0).css("background-color", "#A52A2A")
        gap.eq(1).css("background-color", "white")
        gap.eq(2).css("background-color", "white")
    })
    gap.eq(0).mouseover(function() {
        toplogo.animate({
                marginLeft: 0 + "px"/ / 第一次轮播为0像素
            },
            500,
            function() {

            })
    })
    gap.eq(1).mouseover(function() {
        toplogo.animate({
                marginLeft: (-1349) + "px"/ /第二次就是这张图片的宽度
            },
            500,
            function() {

            })
    })
    gap.eq(2).mouseover(function() {
        toplogo.animate({
                marginLeft: (-2698) + "px"/ / 这是到第三张图片后的宽度
            },
            500,
            function() {

            })
    })

 

发表评论
用户名: 匿名