程序博客网 > mac excel 排序

JQuery实现导航效果、新闻滚动、广告效果、横向滚动

来源：互联网 发布：mac excel 排序 编辑：程序博客网 时间：2024/05/21 08:47
  

JQuery实现导航效果、新闻滚动、广告效果、横向滚动

1、导航效果
2、新闻滚动（跑马灯）
3、广告效果
4、新款上市模块横向滚动

1、导航效果


图1.1 导航效果
1.1 导航样式
[css] view plaincopy
  1. <style type="text/css">  
  2.         /*导航样式开始*/  
  3.         #navigation { width:784px; padding:8px; margin:8px auto; background:#3B5998;height:18px;}  
  4.         #navigation ul li { float:left; margin-right:14px;position: relative ;z-index:100;}  
  5.         #navigation ul li a { display:block;padding:0 8px; background:#EEEEEE; font-weight:700;}  
  6.         #navigation ul li a:hover { background:none; color:#fff;}  
  7.         #navigation ul li ul{background-color: #88C366;position: absolute;width: 80px;overflow:hidden;display:none;}  
  8.         #navigation ul li:hover ul{background-color: #88C366;position: absolute;width: 100px;display:block;}  
  9.         #navigation ul li ul li{border-bottom: 1px solid #BBB;text-align: left;width: 100%;}  
  10.         /*导航样式结束*/  
  11. </style>  
1.2 导航HTML
[html] view plaincopy
  1. <!--导航开始-->  
  2. <div id="navigation">  
  3.     <ul>  
  4.          <li><a href="#">首 页</a></li>  
  5.          <li><a href="#">衬 衫</a>  
  6.                 <ul>  
  7.                      <li><a href="#">短袖衬衫</a></li>  
  8.                      <li><a href="#">长袖衬衫</a></li>  
  9.                      <li><a href="#">无袖衬衫</a></li>  
  10.                 </ul>  
  11.         </li>  
  12.         <li><a href="#">卫 衣</a>  
  13.                 <ul>  
  14.                      <li><a href="#">开襟卫衣</a></li>  
  15.                      <li><a href="#">套头卫衣</a></li>  
  16.                 </ul>  
  17.          </li>  
  18.         <li><a href="#">裤 子</a>  
  19.                 <ul>  
  20.                      <li><a href="#">休闲裤</a></li>  
  21.                      <li><a href="#">卡其裤</a></li>  
  22.                      <li><a href="#">牛仔裤</a></li>  
  23.                      <li><a href="#">短裤</a></li>  
  24.                 </ul>  
  25.          </li>  
  26.          <li><a href="#">联系我们</a></li>  
  27.     </ul>  
  28. </div>  
  29. <!--导航结束-->  
1.3导航脚本
[javascript] view plaincopy
  1. //导航效果（兼容IE6）  
  2. $(function(){  
  3.        $("#navigation ul li:has(ul)").hover(function(){  
  4.             $(this).children("ul").stop(true,true).slideDown(400);  
  5.         },function(){  
  6.             $(this).children("ul").stop(true,true).slideUp("fast");  
  7.     });  
  8. })  

    在IE7和FireFox浏览器上可以使用伪劣:hover来显示导航效果，但IE6并不支持除超链接之外的元素使用这个伪类，因此使用上述的CSS代码并不能再IE6下正常运行，解决方法是用脚本来弥补这个不足。

    在两个动画效果之前都添加了stop(true,true)方法，这样做的好处是能把未执行的完的动画队列清空，并且将正在执行的动画跳转到末状态。

2、新闻滚动（跑马灯）


图1.2 新闻滚动
2.1 新闻滚动样式
[css] view plaincopy
  1. <style type="text/css">  
  2.         /**最新动态 样式*/  
  3.         .news{width:200px;border:1px solid #AAAAAA; margin:10px;}  
  4.         .scrollNews{width:200px;height:85px;line-height:20px;overflow:hidden;background:#FFFFFF;}  
  5.         h3{ height:26px; background:#3B5998;color:#FFF; line-height:26px; text-indent:6px;}  
  6.         .scrollNews li{height:20px; padding-left:10px;}  
  7.     </style>  
2.2 新闻滚动HTML
[html] view plaincopy
  1. <!--最新动态开始-->  
  2. <div class="news">  
  3.     <h3>最新动态</h3>  
  4.     <div class="scrollNews" >  
  5.         <ul>  
  6.             <li><a href="#" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>  
  7.             <li><a href="#" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>  
  8.             <li><a href="#" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>  
  9.             <li><a href="#" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>  
  10.             <li><a href="#" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>  
  11.             <li><a href="#" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>  
  12.             <li><a href="#" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>  
  13.         </ul>  
  14.     </div>  
  15. </div>  
  16. <!--最新动态结束-->  
2.3新闻滚动脚本
[javascript] view plaincopy
  1. /*新闻滚动*/  
  2. $(function() {  
  3.     var $this = $(".scrollNews");  
  4.     var scrollTimer;  
  5.     $this.hover(function() {  
  6.         clearInterval(scrollTimer);  
  7.     }, function() {  
  8.         scrollTimer = setInterval(function() {  
  9.             scrollNews($this);  
  10.         }, 3000);  
  11.     }).trigger("mouseleave");  
  12. });  
  13. function scrollNews(obj) {  
  14.     var $self = obj.find("ul:first");  
  15.     var lineHeight = $self.find("li:first").height(); //获取行高  
  16.     $self.animate({ "marginTop": -lineHeight + "px" }, 600, function() {  
  17.         $self.css({ marginTop: 0 }).find("li:first").appendTo($self); //appendTo能直接移动元素  
  18.     })  
  19. }  

3、广告效果


图3.1 广告效果
3.1 广告效果样式
[css] view plaincopy
  1. <style type="text/css">  
  2.         /*滚动广告样式*/  
  3.         .ad {margin:10px;width:586px; height:150px;overflow:hidden;border:1px solid #AAAAAA;position:relative;}  
  4.         .slider,.num{position:absolute;}  
  5.         .slider li{ list-style:none;display:inline;}  
  6.         .slider img{ width:586px; height:150px;display:block;}  
  7.         .num{ right:5px; bottom:5px;}  
  8.         .num li{float: left;color: #FF7300;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family: Arial;font-size: 12px;cursor: pointer;overflow: hidden;margin: 3px 1px;border: 1px solid #FF7300;background-color: #fff;}  
  9.         .num li.on{color: #fff;line-height: 21px;width: 21px;height: 21px;font-size: 16px;margin: 0 1px;border: 0;background-color: #FF7300;font-weight: bold;}  
  10.     </style>  
3.2 广告效果HTML
[html] view plaincopy
  1. <!--广告滚动-->  
  2. <div class="ad" >  
  3.      <ul class="slider" >  
  4.         <li><img src="/images/shopping/ads/1.gif" alt="ad1"/></li>  
  5.                 <li><img src="/images/shopping/ads/2.gif" alt="ad2"/></li>  
  6.                 <li><img src="/images/shopping/ads/3.gif" alt="ad3"/></li>  
  7.                 <li><img src="/images/shopping/ads/4.gif" alt="ad4"/></li>  
  8.                 <li><img src="/images/shopping/ads/5.gif" alt="ad5"/></li>  
  9.       </ul>  
  10.       <ul class="num" >  
  11.         <li>1</li>  
  12.         <li>2</li>  
  13.         <li>3</li>  
  14.         <li>4</li>  
  15.         <li>5</li>  
  16.       </ul>  
  17. </div>  
3.3 广告效果脚本
[javascript] view plaincopy
  1. /*广告滚动效果*/  
  2. $(function() {  
  3.     var len = $(".num > li").length;  
  4.     var index = 0;  
  5.     var adTimer;  
  6.     $(".num li").mouseover(function() {  
  7.         index = $(".num li").index(this);  
  8.         showImg(index);  
  9.     }).eq(0).mouseover();  
  10.     //滑入 停止动画，滑出开始动画.  
  11.     $('.ad').hover(function() {  
  12.         clearInterval(adTimer);  
  13.     }, function() {  
  14.         adTimer = setInterval(function() {  
  15.             showImg(index)  
  16.             index++;  
  17.             if (index == len) { index = 0; }  
  18.         }, 3000);  
  19.     }).trigger("mouseleave");  
  20. })  
  21. // 通过控制top ，来显示不同的幻灯片  
  22. function showImg(index) {  
  23.     var adHeight = $(".ad").height();  
  24.     $(".slider").stop(true, false).animate({ top: -adHeight * index }, 1000);   //翻滚效果  
  25.     //$(".slider").css("top", -adHeight * index);     //跳转效果  
  26.     $(".num li").removeClass("on")  
  27.         .eq(index).addClass("on");  
  28. }  
    首先使用$(".ad").height()方法获取产品广告的高度，然后使用animate()方法来达到动画效果，每个图片的滚动高度有所不同，可以通过传入的参数index的值乘以产品广告的高度来得到。在animate()方法前，使用shop(true,false)方法将未执行完的动画队列清空，但不将正在执行的动画跳转到末状态。最后使用$(".num li").removeClass("on").eq(index).addClass("on")来给当前的广告数字添加高亮样式。
    现在，当光标在广告右下角的数字上滑过时，广告就会有上下翻转的效果。但如果不去碰它，那么广告始终不会动。因此可以使用trigger()方法来触发。

4、新款上市模块横向滚动


图4.1 新款上市模块横向滚动

4.1 新款上市模块横向滚动样式
[css] view plaincopy
  1. <style type="text/css">  
  2.         /*新款上市样式*/  
  3.         .prolist {position:relative;height: 220px;margin-bottom:10px; overflow:hidden; border: 1px solid #AAAAAA;background:#FFFFFF;border:1px solid #AAAAAA;width: 586px; margin:10px;}  
  4.          h3{background: none repeat scroll 0 0 #3B5998;color: #FFFFFF;height: 26px;line-height: 26px;text-indent: 6px;}  
  5.         .prolist .prolist_content{position:absolute; width:1800px;top:26px; left:0px;padding:20px 0 0 8px;}  
  6.         .prolist ul{margin-bottom:10px; float:left;height: 220px;}  
  7.         .prolist ul li { float:left;display:inline;text-align:center;margin-right:22px;  }  
  8.         .prolist ul li span { display:block;overflow:hidden; }  
  9.         .prolist ul li img { display:block; width:124px; height:124px; background:#EEE; border:0;}  
  10.         .module_left_right{ position:absolute; top:5px; right:10px; cursor:pointer;}  
  11.     </style>  
4.2 新款上市模块横向滚动HTML
[html] view plaincopy
  1. <div class="prolist">  
  2.     <h3>新款上市</h3>  
  3.     <p class="module_left_right"><img id="goLeft" src="/images/shopping/left.gif" alt="左键" /><img id="goRight"  src="/images/shopping/right.gif" alt="右键" /></p>  
  4.     <div  class="prolist_content">  
  5.         <ul>  
  6.             <li>  
  7.                 <a href="#"><img src="/images/shopping/img_1.jpg" alt="" class="imageOver" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>  
  8.             </li>  
  9.             <li>  
  10.                 <a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>  
  11.             </li>  
  12.             <li>  
  13.                 <a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>  
  14.             </li>  
  15.             <li>  
  16.                 <a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>  
  17.             </li>  
  18.             <li>  
  19.                 <a href="#"><img src="/images/shopping/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>  
  20.             </li>  
  21.             <li>  
  22.                 <a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>  
  23.             </li>  
  24.             <li>  
  25.                 <a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>  
  26.             </li>  
  27.             <li>  
  28.                 <a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>  
  29.             </li>  
  30.                 <li>  
  31.                 <a href="#"><img src="/images/shopping/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>  
  32.             </li>  
  33.             <li>  
  34.                 <a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>  
  35.             </li>  
  36.             <li>  
  37.                 <a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>  
  38.             </li>  
  39.             <li>  
  40.                 <a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>  
  41.             </li>  
  42.         </ul>  
  43.     </div>  
  44. </div>             
4.3 新款上市模块横向滚动
[javascript] view plaincopy
  1. /*新款上市模块横向滚动*/  
  2. $(function() {  
  3.     var page = 1;  
  4.     var i = 4; //每版放4个图片  
  5.     var len = $(".prolist_content ul li").length;  
  6.     var page_count = Math.ceil(len / i);   //只要不是整数，就往大的方向取最小的整数  
  7.     var none_unit_width = $(".prolist").width(); //获取框架内容的宽度,不带单位  
  8.     var $parent = $(".prolist_content");  
  9.     //向右 按钮  
  10.     $("#goRight").click(function() {  
  11.         if (!$parent.is(":animated")) {  
  12.             if (page == page_count) {  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。  
  13.                 $parent.animate({ left: 0 }, 800); //通过改变left值，跳转到第一个版面  
  14.                 page = 1;  
  15.             } else {  
  16.                 $parent.animate({ left: '-=' + none_unit_width }, 800);  //通过改变left值，达到每次换一个版面  
  17.                 page++;  
  18.             }  
  19.         }  
  20.     });  
  21.     //往左 按钮  
  22.     $("#goLeft").click(function() {  
  23.         if (!$parent.is(":animated")) {  
  24.             if (page == 1) {  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。  
  25.                 $parent.animate({ left: '-=' + none_unit_width * (page_count - 1) }, 800); //通过改变left值，跳转到最后一个版面  
  26.                 page = page_count;  
  27.             } else {  
  28.                 $parent.animate({ left: '+=' + none_unit_width }, 800);  //通过改变left值，达到每次换一个版面  
  29.                 page--;  
  30.             }  
  31.         }  
  32.     });  
  33. });  
*注意:公共样式
[css] view plaincopy
  1. body{font: 12px/1.6em Helvetica,Arial,sans-serif;}  
  2. *{margin:0px; padding:0px;}  
  3. a{text-decoration:none; outline: none;}  
  4. a:hover{text-decoration:underline;}  
  5. ul li{list-style-type:none;}  
  6. .g-cl{clear:both;zoom:1;}  
  7. h1, h2, h3, h4, h5, h6 {font-size: 1em; margin:0px; padding:0px;}  
  8. html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/  
阅读全文
0 0
mac excel 排序 mac excel 排序
原创粉丝点击
热门IT博客
批图软件下载批图软件下载
华住酒店员工流失数据华住酒店员工流失数据
四川建龙js-004
网络课程艺术鉴赏答案
mac登录界面卡住
懒猫营销软件
桃源网络硬盘5.8sql版
网络奇兵讲的什么
mac忘记了管理员密码
软件项目进展结点
php模板引擎与java
中国最伟大的人 知乎
ios基于linux还是unix
上海成浪网络怎样
网上的淘宝运营教程
设计家软件
win10好软件
jar软件下载平台
centos安装zabbix3.0
linux如何卸载软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 钳子的作用 大钳子 线钳子 钳子报价 钳子品牌 修脚钳子 knipex钳子 钳子大全 偏口钳子 气动钳子 水管钳子 止血钳子 台钳子 手钳子 光纤钳子 螃蟹的钳子 电焊钳子 定制钳子 电线钳子 垃圾钳子 消防钳子 断线钳子 拔牙的钳子 弹簧钳子 带钳子的虾 钳子分类 压线帽钳子 鹰嘴钳子 嬷嬷用钳子验身 拔牙钳子识别图解 钳子改装的撒放器图解图片 剪电缆的钳子 网线钳子怎么用 网线钳子价格 网线钳子多少钱 各种钳子图片 钳子的种类图解 钳子的种类图片 小龙虾钳子能吃吗 螃蟹钳子上的毛怎么去掉 钳子用英语怎么说

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里