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

最新推荐文章于 2024-08-02 04:08:13 发布
最新推荐文章于 2024-08-02 04:08:13 发布
阅读量1.5w 收藏 36
点赞数 6
分类专栏： 我の原创 JQuery 文章标签： jquery function class float firefox 脚本
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pan_junbiao/article/details/7423751
版权

1、导航效果

2、新闻滚动（跑马灯）

3、广告效果

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

1、导航效果


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

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

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

2、新闻滚动（跑马灯）


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

3、广告效果


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

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


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

4.1 新款上市模块横向滚动样式 
<style type="text/css">
        /*新款上市样式*/
        .prolist {position:relative;height: 220px;margin-bottom:10px; overflow:hidden; border: 1px solid #AAAAAA;background:#FFFFFF;border:1px solid #AAAAAA;width: 586px; margin:10px;}
         h3{background: none repeat scroll 0 0 #3B5998;color: #FFFFFF;height: 26px;line-height: 26px;text-indent: 6px;}
        .prolist .prolist_content{position:absolute; width:1800px;top:26px; left:0px;padding:20px 0 0 8px;}
        .prolist ul{margin-bottom:10px; float:left;height: 220px;}
        .prolist ul li { float:left;display:inline;text-align:center;margin-right:22px;  }
        .prolist ul li span { display:block;overflow:hidden; }
        .prolist ul li img { display:block; width:124px; height:124px; background:#EEE; border:0;}
        .module_left_right{ position:absolute; top:5px; right:10px; cursor:pointer;}
    </style>
4.2 新款上市模块横向滚动HTML 
<div class="prolist">
    <h3>新款上市</h3>
    <p class="module_left_right"><img id="goLeft" src="/images/shopping/left.gif" alt="左键" /><img id="goRight"  src="/images/shopping/right.gif" alt="右键" /></p>
    <div  class="prolist_content">
        <ul>
            <li>
                <a href="#"><img src="/images/shopping/img_1.jpg" alt="" class="imageOver" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
            </li>
            <li>
                <a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
            </li>
            <li>
                <a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
            </li>
            <li>
                <a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
            </li>
            <li>
                <a href="#"><img src="/images/shopping/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
            </li>
            <li>
                <a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
            </li>
            <li>
                <a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
            </li>
            <li>
                <a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
            </li>
                <li>
                <a href="#"><img src="/images/shopping/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
            </li>
            <li>
                <a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
            </li>
            <li>
                <a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
            </li>
            <li>
                <a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
            </li>
        </ul>
    </div>
</div>
4.3 新款上市模块横向滚动 
/*新款上市模块横向滚动*/
$(function() {
    var page = 1;
    var i = 4; //每版放4个图片
    var len = $(".prolist_content ul li").length;
    var page_count = Math.ceil(len / i);   //只要不是整数，就往大的方向取最小的整数
    var none_unit_width = $(".prolist").width(); //获取框架内容的宽度,不带单位
    var $parent = $(".prolist_content");
    //向右 按钮
    $("#goRight").click(function() {
        if (!$parent.is(":animated")) {
            if (page == page_count) {  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
                $parent.animate({ left: 0 }, 800); //通过改变left值，跳转到第一个版面
                page = 1;
            } else {
                $parent.animate({ left: '-=' + none_unit_width }, 800);  //通过改变left值，达到每次换一个版面
                page++;
            }
        }
    });
    //往左 按钮
    $("#goLeft").click(function() {
        if (!$parent.is(":animated")) {
            if (page == 1) {  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
                $parent.animate({ left: '-=' + none_unit_width * (page_count - 1) }, 800); //通过改变left值，跳转到最后一个版面
                page = page_count;
            } else {
                $parent.animate({ left: '+=' + none_unit_width }, 800);  //通过改变left值，达到每次换一个版面
                page--;
            }
        }
    });
});
*注意:公共样式 
body{font: 12px/1.6em Helvetica,Arial,sans-serif;}
*{margin:0px; padding:0px;}
a{text-decoration:none; outline: none;}
a:hover{text-decoration:underline;}
ul li{list-style-type:none;}
.g-cl{clear:both;zoom:1;}
h1, h2, h3, h4, h5, h6 {font-size: 1em; margin:0px; padding:0px;}
html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/



pan_junbiao
关注
  • 6
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
html导航栏横向展开,jquery实现可横向和竖向展开的动态下滑菜单效果
weixin_42488542的博客
05-30 1292
本文实例讲述了jquery实现可横向和竖向展开的动态下滑菜单效果。分享给大家供大家参考。具体如下：这里演示了两个下拉导航菜单的效果，用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现，最新的jquery版本也可以引入，在演示页面中，分别有横向水平向下滑出的下拉菜单，还有纵向垂直布局...
Html5-横向导航菜单实现,原生js和jquery分别实现横向导航菜单效果
weixin_39861882的博客
06-08 845
本文实例为大家分享了原生js和jquery横向导航菜单的制作方法，供大家参考，具体内容如下原生javascript实现：这一次要实现的是鼠标放上去以后，菜单栏被选中的那一栏水平拉伸，鼠标离开后水平收缩。并带有一定的时间性，使肉眼能够看出其拉伸收缩的动画效果。开始用javascript进行编写：首先在之前水平方向的导航栏上进行操作，将第一栏和选中栏的样式只改变为背景变黑色，文字变白色.on,a:ho...
jQuery新闻列表滚动(上下滚动、横向滚动、无缝滚动、停顿滚动)
wangzhneg123的博客
02-28 7034
效果展示： 源码展示： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jQuery新闻列表滚动(上下滚动、横向滚动、无缝滚动、停顿滚动)&lt;/title&gt; &lt;script src="http:/
jquery 控制横向滚动条位置
最新发布
weixin_40867471的博客
08-02 27
使用 jQuery 控制横向滚动条位置 在现代网页开发中，常常需要处理元素的滚动条，尤其是横向滚动条。通过 jQuery，开发者可以轻松地控制页面或某个元素的滚动位置。本文将介绍如何使用 jQuery 控制横向滚动条的位置，并提供示例代码进行说明。 1. 什么是横向滚动条？ 横向滚动条通常出现在页面内容宽度超过了可视区域时...
利用jQuery设计横/纵向菜单
weixin_33860147的博客
05-20 138
       在网页中，菜单扮演着“指路者”的角色。怎样设计一个人性化的菜单呢。以下小编带着大家一起做。 效果图： 设计历程： 1.首先利用html中的&lt;ul&gt;和&lt;li&gt;标签进行嵌套，搭起一个总体的框架。例如以下图所看到的： Html代码： &lt;head&gt; &lt;meta http-equiv="Content-Type" ...
滚动新闻效果（使一个div滚动）
06-05 325
这个是别人的代码，效果还不错，我做了些改进，如果有需要的，可以试试这个， 支持滚动一个div里面的内容。 &lt;HTML&gt; &lt;HEAD&gt; &lt;META http-equiv=Content-Type content="text/html; charset=utf-8"&gt; &lt;BODY&gt; &lt;div id="icef...
jQuery文字横向滚动效果的实现代码
10-22
在介绍如何实现jQuery文字横向滚动效果之前，我们需要对所提及的技术有所了解。首先，jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。通过使用jQuery，开发者...
横向滚动jQuery导航代码
04-07
【横向滚动jQuery导航代码】是一种常见的网页设计技术，主要用于创建具有动态效果的网站导航菜单。在网页设计中，良好的导航是用户体验的关键因素之一，因为它帮助用户轻松地在网站的各个部分之间进行切换。jQuery，...
jQuery手机移动端图片横向滚动效果
06-27
在移动设备上，为了优化...总结，通过上述步骤和方法，我们可以使用jQuery在手机移动端实现图片的横向滚动效果，为用户提供流畅、直观的浏览体验。实践中，可能还需要根据具体需求进行调整和优化，以满足项目的要求。
jquery实现图片滚动效果的简单实例
10-26
标题“jquery实现图片滚动效果的简单实例”和描述“主要介绍了jquery实现图片滚动效果的简单实例，有需要的朋友可以参考一下”中提及的知识点主要围绕如何使用jQuery来实现图片滚动效果。jQuery是一个快速、小巧的...
jQuery 实现网页整屏横向、纵向滚动切换特效.rar
07-09
jQuery 控制网页整屏横向、垂直滚动切换，意思是，它与Tab大体上类似，但是TAB只控制某个Division标签，这一个控制的是整个网页，点击页面询问的序号，当前网页会滚动出去，然后第二屏滚动进来，形成连贯的滚屏效果...
Jquery 横向滚动
03-09 814
1 2 111111111111 222222222222 3333 44444 555555 666666 *,html,body{margin:0;padding:0;}
jquery ui 实现横向导航菜单
u012311282的专栏
05-11 3554
1、html依次jquery-1.12.3.min.js、jquery-ui.min.js、object.js、jquery-ui.min.css 并在项目中引入images文件夹，从jquery ui网站上都可以下载下来。注意选好主题。 html> html lang="en"> head> meta charset="UTF-8"> script src="jquery
jquery横向滚动条
weixin_30815427的博客
11-14 782
此代码献给wendy 由于工作太忙，下次再整理成插件调用，先记录下来，欢迎同学们提意见。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt...
jquery实现新闻滚动
chenndd的专栏
11-16 1087
<br />首先需要jquery的框架支持（这点博客已经具备了jquery的环境，可以不管），在你想要添加效果的页面里面的<head></head>之间添加如下功能函数：JavaScript代码<script type="text/javascript">function AutoScroll(obj){        $(obj).find("ul:first").animate({                marginTop:"-25px"        },500,function(){    
jquery横向滚动_使用jQuery进行横向滚动
culiao9310的博客
09-28 3089
jquery横向滚动View demo 查看演示Download Source 下载源After getting the request, we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on...
JQuery实现导航栏效果
sj15560122716的博客
06-23 903
<script type="text/javascript"> $(document).ready(function () { $(".level1>a").click(function () { //为当前元素添加指定的类名 然后让lu显示出来 $(this).addClass("current").next().show() //找到非点击让他隐藏删.
jquery之（新闻单条滚动）
node的专栏
10-10 1535
新闻滚动     function scroll_news(){         var firstNode = $('#message_list li');         firstNode.eq(0).fadeOut('slow',function(){          $(this).clone().appendTo($(this).parent()).show('sl
jquery全屏滚动效果
啊哈前端的专栏
07-26 2217
jquery全屏滚动效果 * {margin: 0;padding: 0} html,body { width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,0.5); } section { height
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pan_junbiao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值