css代碼 背景與前景 background-color:#0000; 背景色,樣式表優先順序高 background-image:url(路徑); 設置背景圖片 background-attachment:fixed; 背景固定,不隨字體滾動 background-attachment:scroll ...
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() {
})
})
