今儿分享一个jquery实现多行滚动效果。 我看一些论坛网站上面,公告处用的较多。 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), speed=opt.speed?parseInt(opt.speed,10):1000, //卷动速度,数值越大,速度...
手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行;还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所以下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动;在这里就简单介绍一下遇到的问题和解决的方法; 问题一:给图片加上链接后,在拖动的...
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!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" /> <title>图片滚动</title> </head> <body> <style type="text/css"> <!-- #demo { background:...
这里贴一下自己演示的代码,期望对使用的朋友所有启发,我这里是结合了两个例子实现的 .focus-item ul li.item{text-align: center; } .scroll-area .prev,.scroll-area .next{position: absolute;bottom: 590px;width: 29px;height: 64px;opacity: 0.6;overflow: hidden;display: none;text-indent: -999px;border: medium none;background: url(/images/arrowLR.png) no-repeat scroll 0% 0% transparent; } .scroll-area .prev{...
昨晚德国和葡萄牙的焦点之战你看了吗?北京时间凌晨的比赛中,C罗领衔的葡萄牙0-4德国被完灭……他是金球奖得主、欧洲金靴、欧冠冠军核心,在葡萄牙队……9张图 C罗告诉你什么叫欲哭无泪 代码如下:<span style="font-size:14px;"><!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> <title>Scroll...
完整的项目在附件中 代码如下:<!DOCTYPE html> <html> <head> <title>图片切换</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" > var num = 0 $(function(){ $("div ol li").mouseover(function(e){ $(this).attr("class","current"); $(this).siblings().attr("class",""); //兄弟节点的class属性设置为空 //alert($(ul).index()) num = $(ul).index() + 2 va...
横向 <div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();" onmouseout="doscroll()"> <div id="demo1" style="white-space:nowrap;padding:0;"> <a href="javascript:alert(发表新贴);"><img src="图片URL" height=20 width=104 border=0></a> <a href="javascript:alert(发表回复);"><img src="图片URL" height=20 width=104 border=0></a> </div> </div> <...
效果:代码:代码如下:<head runat="server"> <title></title> <style type="text/css"> #div1 { width: 245px; height: 150px; background: red; margin: 250px; margin-left: 500px; position: absolute; overflow: hidden; } #div1 ul li { float: left; width: 44px; ...
代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery 图片自动无缝滚动</title> <script src="jquery.min.js" type="text/javascript"></script> <style type="text/css"> ul,li { list-style: none;margin: 0; padding: 0;} li { float: left;} img { width: 100px; height: 100px...
[javascript] 代码如下:var forimg = function (foritem, hoverStop, defaultfor) { var _foritem = foritem.constructor == jQuery ? foritem : $(foritem); var imgarr = [ { "z-index": 1, "width": 100, "height": 100, "left": 0, "top": "75px" }, { "z-index": 2, "width": 200, "height": 200, "left": 50, "top": "25px" }, { "z-index": 3, "width": 300, "...
需求 : 图片切换的时候下一屏不允许出现空白的项,换句话说就是 :1、当移动的最后一屏移动的个数小于要展示的个数的时候 ,只移动(展示个数-最后一屏的个数的)差值。 举个例子: 每一屏都要展示7个,但总个数才10个,滚动到下一屏时候用户看到的还是7个,这个时候需要移动的是三个 这个效果是基于jQuery写的,只是想纪念下自己的学习 话不多说了,贴代码代码如下:(function( $ ){ var slider = function( elem , args ){ ...
BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: ◆ 可以指定显示的元素总数 ◆ 可以指定每次滚动的元素个数 ◆ 自动播放模式 ◆ 前一张/后一张按钮控制图片流动 参数含义: display_num:显示元素的数量,几张图片 move:单击左右控制键时,移动的元素个数,此处为移动2张图片 prev_image:上一元素按钮图片 next_image:下一元素按钮图片 margin:图片之间的间隙,一般设为10px auto:自动滚动效果 contro...
1、图片滚动 代码如下:<!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> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { Xhun(".a"); //----------------------只需要修改 ”...
代码如下:<div id="demo"> <div id="indemo"> <div id="demo1"> <asp:Repeater ID="Pro_List" runat="server"> <ItemTemplate> <a href="/Product/html/<%#Eval("id") %>/" title="<%#Eval("Title")%>"><img src=/<%#Eval("Pic") %> width="130" height="97" /> <p><%#Eval("Title") %></p> </a> </ItemTemplate> </asp:Repeater> </div> <div id="demo2"></div> </div> </div> <script type="text/javascript"> var speed = 20; v...
为什么我在首页同时复制出二段代码后图片不能流动显示了? 代码如下:<div align="center"> <table style="TABLE-LAYOUT: fixed; border-collapse:collapse" cellSpacing=0 cellPadding=0 width=760 border=1 height="150" bordercolor="#1989D7"> <tr> <td height="150"> <div id=demo style="OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 150px"> <table cellPadding=0 align=left border=0 cellspace="0"> <tr> <td id=demo1 vAlign...