<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为带动画效果的Devrama slider焦点图代码，属于站长常用代码，更多焦点图代码请访问懒人图库JS代码频道。" />
<title>带动画效果的Devrama slider焦点图代码_懒人图库</title>
<link rel="stylesheet" href="css/lrtk.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.devrama.slider.js"></script>
<style type="text/css">
.example-animation {
color: #FFF;
font-size: 60px;
}
</style>
</head>
<body>
<!-- 代码 开始 -->
<div class="example-animation">
<div data-lazy-background="images/1.jpg">
<h3 data-pos="['0%', '110%', '0%', '5%']" data-duration="700" data-effect="move">
Moving
</h3>
<div data-pos="['-30%', '25%', '40%', '25%']" data-duration="700" data-effect="move">
Text
</div>
<div data-pos="['56%', '-40%', '56%', '11%']" data-duration="700" data-effect="move">
and Image
</div>
<div data-pos="['23%', '110%', '23%', '42%']" data-duration="700" data-effect="move">
<img data-lazy-src="images/add.jpg"/>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.example-animation').DrSlider(); //Yes! that's it!
});
</script>
<!-- 代码 结束 -->
<div style="text-align:center;margin:50px 0">
<p>来源：<a href="http://jquery-plugins.net/devrama-slider-jquery-image-html-slider-plugin" target="_blank">jquery-plugins.net</a> 代码整理：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a> 感谢：<a href="http://blog.hexccc.com/service/" target="_blank">wordpress Xcoder</a></p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p></p>
<p><p>带动画效果的Devrama slider焦点图代码，可以在焦点图中嵌入html内容和文字动画效果，兼容主流浏览器，懒人图库推荐下载！</p><p><br /></p><p>使用方法：</p><p>1、head区域引用文件lrtk.css及jquery.min.js, jquery.devrama.slider.js</p><p>2、在文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码</p><p>3、复制images文件夹里的图片到相应的路径</p></p>
<p style="margin:20px 0"></p>
</div>
</body>
</html>如红色部分，我自己引用时如下图为什么这种原因
添加回答
举报
0/150
提交
取消