2017年10月21日 CSS常用样式&鼠标样式 …
2018-06-18 00:43:47来源:未知 阅读 ()
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() { }) })
谢谢大家收看本人博客园
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:ADO.NET知识点
下一篇:多线程编程学习笔记-基础(二)
- 2020年3月21日Benelux Algorithm Programming Contest 2019 2020-03-25
- 递归(七):递归程序填空 2019-08-16
- 【2017年新篇章】 .NET 面试题汇总(一) 2018-06-18
- bzoj4881 [ Lydsy2017年5月月赛 ] -- 二分图染色+线段树 2018-06-17
- 2017年腾讯 秋招软件开发笔试编程题回忆版 2018-06-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash