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() { })
})
谢谢大家收看本人博客园