<!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>
如红色部分,我自己引用时如下图
为什么这种原因
相关分类