JavaScript和jQuery分别实现广告图片切换效果资源-CSDN文库

共15个文件

jpg：10个

gif：2个

js：1个

广告图片切换效果

4星 · 超过85%的资源需积分: 10 40 浏览量 2010-03-23 12:38:30 上传评论收藏 183KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

浏览效果.rar （15个子文件）

浏览效果

images

2.jpg 24KB

1.jpg 26KB

tabbar.gif 154B

3.jpg 39KB

5.jpg 24KB

4.jpg 25KB

s4.jpg 2KB

main_bg.gif 98B

s2.jpg 2KB

s3.jpg 2KB

s1.jpg 2KB

s5.jpg 2KB

浏览效果.html 2KB

scripts

jquery-1.3.1.js 115KB

广告效果.htm 4KB

<!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" /> <script type="text/javascript" src="scripts/jquery-1.3.1.js"></script> <script type="text/javascript"> $(function(){ var po;//相对位置 var m;//偏移量 $("div.d2 li").css("opacity","0.3"); $("div.d2 li").hover( function(){ var $parent = $(this).parents("div.d"); var $pi = $parent.find("div.d1"); po = $(this).position(); m = po.left; $(this).css("opacity","1"); $pi.stop(true,false).animate({ left : -(m /72)*360 },"slow"); },function(){ var $parent = $(this).parents("div.d"); var $pi = $parent.find("div.d1"); $(this).css("opacity","0.3"); $pi.stop(true,false).animate({ left : -(m /72)*360 },"slow"); }) } ) </script> <title>无标题文档</title> <style type="text/css">  </style> </head> <body> <div class="d"> <div class="d1"> <ul> <li><img src="images/1.jpg" /></li><li><img src="images/2.jpg" /></li><li><img src="images/3.jpg" /></li><li><img src="images/4.jpg" /></li><li><img src="images/5.jpg" /></li> </ul> </div> <div class="d2"> <ul> <li><img src="images/s1.jpg" /></li><li><img src="images/s2.jpg" /></li><li><img src="images/s3.jpg" /></li><li><img src="images/s4.jpg" /></li><li><img src="images/s5.jpg" /></li> </ul> </div> </div> </body> </html>

评论收藏

内容反馈