12-09
12-09
12-09
12-09
12-09
12-09
12-09
12-09
12-09
12-09
12-09
12-09
ADADADADAD
mysql数据库 时间：2024-11-29 10:08:31
作者：文/会员上传
12-09
12-09
12-09
12-09
12-09
12-09
12-09
12-09
12-09
12-09
12-09
12-09
效果如下：代码如下：<!DOCTYPE html><html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>jQuery鼠标悬停内容动画切换效果</title> <
以下为本文的正文内容，内容仅供参考！本站为公益性网站，复制本文以及下载DOC文档全部免费。
效果如下：
代码如下：
<!DOCTYPE html><html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>jQuery鼠标悬停内容动画切换效果</title> <style>* {margin: 0;padding: 0;list-style: none;}img {border: 0;}a {color: #fff;text-decoration: none;}.servicesBox {width: 1000px;height: 270px;margin: 0 auto;clear: both;line-height: 18px;color: #999999;font-size: 12px;}.servicesBox .serBox {cursor: pointer;border: 1px solid #fff;display: inline;width: 198px;height: 250px;float: left;overflow: hidden;background-color: #f7f7f7;position: relative;}.servicesBox .serBoxOn {font-family: "Microsoft Yahei";display: none;width: 320px;height: 270px;background: url(http://demo.lanrenzhijia.com/2014/pic0910/images/serboxon_bg.gif) repeat 0px 0px;position: absolute;left: 0px;top: 0px;z-index: 19;}.servicesBox .serBox .pic1 {width: 110px;height: 110px;text-align: center;position: absolute;top: 22px;right: 41px;z-index: 99;}.servicesBox .serBox .pic2 {width: 110px;height: 110px;text-align: center;position: absolute;top: 22px;left: -110px;z-index: 99;}.servicesBox .serBox .txt1 {width: 198px;height: 100px;color: #999999;position: absolute;top: 145px;left: 0px;z-index: 99;}.servicesBox .serBox .txt2 {width: 198px;height: 100px;color: #a9cf4f;position: absolute;top: 145px;right: -240px;z-index: 99;}.servicesBox .serBox span.tit {font-size: 16px;display: block;text-align: center;}.servicesBox .serBox .txt1 .tit {color: #000000;line-height: 30px;}.servicesBox .serBox .txt2 .tit {color: #fff;line-height: 30px;font-family: "Microsoft Yahei";}.servicesBox .serBox p {padding: 0 10px;text-align: center;} </style> </head> <body> <!-- 代码begin --> <p class="servicesBox"><p id="p35" class="serBox" onclick="serFocus(1)"><p class="serBoxOn"></p><p class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/3.png"> </p><p class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/3-3.png"> </p><p class="txt1"> <span class="tit">开心网</span> <p>开心网营销</p></p><p class="txt2"> <a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">开心网</span> <p>开心网营销</p> </a></p></p><p id="p36" class="serBox" onclick="serFocus(2)"><p class="serBoxOn"></p><p class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/1.png"> </p><p class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/1-1.png"> </p><p class="txt1"> <span class="tit">人人网</span> <p>人人网营销</p></p><p class="txt2"> <a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">人人网</span> <p>人人网营销</p> </a></p></p><p id="p37" class="serBox" onclick="serFocus(3)"><p class="serBoxOn"></p><p class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/2.png"> </p><p class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/2-2.png"> </p><p class="txt1"> <span class="tit">QQ空间</span> <p>QQ空间营销</p></p><p class="txt2"> <a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">QQ空间</span> <p>QQ空间营销</p> </a></p></p><p id="p38" class="serBox" onclick="serFocus(3)"><p class="serBoxOn"></p><p class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/35.png"> </p><p class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/35-35.png"> </p><p class="txt1"> <span class="tit">问答营销</span> <p>问答投放 锁住潜在客户</p></p><p class="txt2"> <a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">问答营销</span> <p>问答投放 锁住潜在客户</p> </a></p></p><p id="p39" class="serBox" onclick="serFocus(3)"><p class="serBoxOn"></p><p class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/31.png"> </p><p class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/31-31.png"> </p><p class="txt1"> <span class="tit">邮件推广</span> <p>低成本 商机无限</p></p><p class="txt2"> <a href="http://www.lanrenzhijia.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="a_jump"><span class="tit">邮件推广</span> <p>低成本 商机无限</p> </a></p></p> </p> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> <script>$(function() {$(".serBox").hover( function() { $(this).children().stop(false, true); $(this).children(".serBoxOn").fadeIn("slow"); $(this).children(".pic1").animate({right: -110 }, 400); $(this).children(".pic2").animate({left: 41 }, 400); $(this).children(".txt1").animate({left: -240 }, 400); $(this).children(".txt2").animate({right: 0 }, 400); }, function() { $(this).children().stop(false, true); $(this).children(".serBoxOn").fadeOut("slow"); $(this).children(".pic1").animate({right: 41 }, 400); $(this).children(".pic2").animate({left: -110 }, 400); $(this).children(".txt1").animate({left: 0 }, 400); $(this).children(".txt2").animate({right: -240 }, 400); });}); </script> <!-- 代码end --></body></html>
11-20
11-19
11-20
11-20
11-20
11-19
11-20
11-20
11-19
11-20
11-19
11-19
11-19
11-19
11-19
11-19