基于jquery的滚动新闻列表

呵呵，效果图如下：
 

ps：gif做的不是很好，大家将就一下吧，呵呵。

下面来看代码：


代码如下:

<div class="news-container" style="width: 260px; margin: auto;">
<ul>
<li style="height:40px">
<!--这里可以换成是动态的新闻-->
<a href="NewsRead.aspx?news_id=<%=mcmNewsList[i].News_id%>" style="padding-bottom: 0px; font-size:12px; height:12px;">新闻标题1</a>
<br />
</li>
<li style="height:40px">
<a href="NewsRead.aspx?news_id=<%=mcmNewsList[i].News_id%>" style="padding-bottom: 0px; font-size:12px; height:12px;">新闻标题2</a>
<br />
</li>
<li style="height:40px">
<a href="NewsRead.aspx?news_id=<%=mcmNewsList[i].News_id%>" style="padding-bottom: 0px; font-size:12px; height:12px;">新闻标题3</a>
<br />
</li>
</ul>
</div>

代码打包下载

赞 (0)

相关推荐

  • jquery+json 通用三级联动下拉列表

    Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进

  • Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的介绍,不少童鞋都问了这么个问题,怎么获取选中的值?真是个好问题,因为我在看demo的时候也发现了这个问题,呵呵! 先简单说说这个插件: jquery-multiselect 基于Jquery-ui的组件体系. 所以使用它的时候,先得导入jquery-ui相关的js和css哦 特性 •支持点击labe

  • jQuery实现列表自动循环滚动鼠标悬停时停止滚动

    jQuery实现列表自动循环滚动鼠标悬停时停止滚动

    需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图:  上干货 html: 复制代码 代码如下: <div id="news"> <ul> <li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li> <li><a h

  • 基于jquery实现多选下拉列表

    基于jquery实现多选下拉列表

    本文实例为大家分享了jquery实现多选下拉列表展示的具体代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul li{ list-style: none; } .hide{display: none} .widt

  • jquery常用技巧及常用方法列表集合

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.g

  • jquery 操作单选框，复选框，下拉列表实现代码

    1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码 代码如下: <form> 您爱好的运动是: <input type="checkbox" name="item" value="football"/> football <input type="checkbox" name="item" value="

  • jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

    jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

    实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果! 为便于讲解,这里直接给出省份:河南省(sf_id=1)  浙江省(sf_id=2),而地市和学生信息则分别建立两张数据表!编码方式均为:utf8!新建数据库并执行以下SQL语句! 复制代码 代码如下: /* 地市表 */ create TABLE IF NOT EXISTS `dishi`( `ds_id` int(3)

  • jQuery初级教程之网站品牌列表效果

    jQuery初级教程之网站品牌列表效果

    本文实例为大家分享了jQuery网站品牌列表效果展示的具体代码,供大家参考,具体内容如下 1.EG2.aspx <!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&q

  • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--

  • 基于jquery的滚动新闻列表

    基于jquery的滚动新闻列表

    呵呵,效果图如下:   ps:gif做的不是很好,大家将就一下吧,呵呵. 下面来看代码: 复制代码 代码如下: <div class="news-container" style="width: 260px; margin: auto;"> <ul> <li style="height:40px"> <!--这里可以换成是动态的新闻--> <a href="NewsRead.aspx

  • jQuery循环滚动新闻列表示例代码

    最近由于项目原因,学习了下jquery,实现了一个小小的功能,就是点击公告的上一条下一条来查看滚动条.具体代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta ht

  • 用Jquery实现滚动新闻

    此文主要用Jquery实现滚动新闻,如此少的代码就能实现这个功能真的是不由得感叹Jquery的强大功能. 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication244.Default" %> <!DOCTYPE html PUBLIC "

  • 基于jquery实现百度新闻导航菜单滑动动画

    基于jquery实现百度新闻导航菜单滑动动画

    本文实例为大家分享jquery实现百度新闻导航菜单滑动动画,供大家参考,具体内容如下 思路与步骤 1.利用UL创建简单横向导航: <!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/199

  • 基于jQuery实现滚动刷新效果

    基于jQuery实现滚动刷新效果

    Jquery实现简单的滚动刷新效果: 实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果 HTML正文: <form id="form1" runat="server"> <div style="height: 3000px; background-color: yellow;"> </div> </form> Javascript操作代码: $(document).ready(f

  • 基于jQuery实现滚动切换效果

    基于jQuery实现滚动切换效果

    仿锋利的Jquery案例做的一个滚动切换效果,供大家参考,具体内容如下 效果如下图: 前台HTML代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title

  • 基于jquery的滚动鼠标放大缩小图片效果

    今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的DOMMouseScroll来处理这个功能,代码如下,并加上注意的注释项: 复制代码 代码如下: $(function(){ $(".body img").each(function(){ if($.browser.msie){ $(this).bind("mousewheel",function(e){ var e=e|

  • 基于jQuery的简单的列表导航菜单

    基于jQuery的简单的列表导航菜单

    下面是我做的一个简单的导航菜单,因为是新手,难免有什么不对的地方,希望大家拍砖! 好了 开始进入正题吧: 1.首先定义CSS样式表: 复制代码 代码如下: <style type="text/css"> body{font-size:13px} ul,li{list-style-type:none;padding:0px;margin:0px} .menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFD

  • 基于jQuery实现点击列表加载更多效果

    本文实例为大家分享了jQuery点击加载更多效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery s

  • 超轻量级的基于jquery的三级展开列表

    超轻量级的基于jquery的三级展开列表

    这几天在公司的通用管理后台,使用的左右框架结构,点击左侧,右侧展开内容,项目中经常遇到左侧二级或者三级的情况,以前都是使用dtree,但是发现dtree ,样式及结构上不好控制 , 如果是动态的数据,还要写到cs文件里面 输入字符,这样不利于维护,时间久了自己都找不清了.. 于是今天自己写了个轻量级的三级展开菜单,如果需要可以在增加一级别,一般公司的项目三级都足够了. 简介: div部分无需自己定义class 及ID,只要是如下的结构就可以了,数据可以是动态 也可以是静态的 样式自己可以控制,修

随机推荐