具体代码如下:
<!doctype html>
<html>
<head>
<title></title>
<style>
#slides{
position:absolute
left:0px
top:0px
height:100%
width:100%
overflow:hidden
}
.slide{
position:absolute
height:600px
width:800px
opacity:0.7
background-color:rgba(0, 128, 196, 0.5) !important
background-color:#ccc
border-radius:10px
left:50%
top:50%
margin-top:-300px
box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5)
transition:all 0.25s ease-in-out 0s
}
.current{
opacity:1
margin-left:-400px
}
.future{
margin-left:450px
transform: skew(-3deg) scale(0.8)
-webkit-transform: skew(-3deg) scale(0.8)
}
.post{
margin-left:-1250px
transform: skew(3deg) scale(0.8)
-webkit-transform: skew(3deg) scale(0.8)
}
.far-future{
margin-left:1200px
transition:none
开发者必用:F12或者安装bug查件!
去懒人图库等一些站长用的工具里找到幻灯片的图片,
使用方法:
使用方法:
1、在head区域引入样式表文件lrtk.css,js/pe.kenburns/themes/default/skin.min.css
2、在head区域引入jquery-1.5.2.min.js和js/pe.kenburns/jquery.pixelentity.kenburnsslider.min.js
3、初始化
<script>
jQuery(function($){
$(".peKenBurns").peKenburnsSlider({externalFont:true})
})
</script>
4、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)