flyxiang228
- 浏览: 60294 次
- 性别:
- 来自: 江西
-
文章分类
最新评论
<!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=utf-8" />
<title>animate demo</title>
<style type="text/css">
<!--
*{margin:0;padding:0;color:#fff;}
.ar_tab2{position:relative;width:746px;margin:100px auto;background:#131313;padding:0 6px;}
#tab_dl{width:646px;overflow:hidden;margin:0 30px;}
#tab_dt{width: 1200px;margin-left:0px;}
#tab_dt a{color: #888888;cursor: pointer;display: block;float: left;height: 25px;line-height: 25px;padding: 0 16px;text-align: center;/*text-shadow: 0 2px 0 #000000;*/}
#leftA{float:left;margin-top:8px;cursor:pointer;}
#rightA{float:right;margin-top:8px;cursor:pointer;}
-->
</style>
</head>
<body>
<div class="ar_tab2">
<img src="images/left_a.png" alt="" id="leftA" />
<img src="images/right_a.png" alt="" id="rightA" />
<dl id="tab_dl">
<dt id="tab_dt">
<a class="">All</a><a class="">Rock</a><a>pop</a><a>Metal</a><a>NewAge</a><a class="">Country</a><a class="ar_tabActive">Gospel</a><!--<a>Funk</a>--><a>World</a><a>Classical</a><a>Classical</a><a>Classical</a><a>Classical</a><a>Classical</a>
</dt>
</dl>
</div>
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//<!--[CDATA[
/**
* @effect.
* @depend jQuery frame
* @function name animate
* @param dir() step()
* @create 12/20/2010
*/
var animate = function (dir, step) {
var position;
var contentwidth;
var sliderwidth;
position = parseInt($("#tab_dt").css("margin-left"));
contentwidth = parseInt($("#tab_dt").css("width"));
sliderwidth = parseInt($("#tab_dl").css("width"));
switch (dir) {
case "right":
if(((position - step) < (sliderwidth - contentwidth))){
position = (sliderwidth - contentwidth);
$("#leftA").show();
$("#rightA").hide();
}else{
$("#leftA").show();
position = (position - step);
}
//position = ((position - step) < (sliderwidth - contentwidth)) ? (sliderwidth - contentwidth) : (position - step);
break;
case "left":
if(((position + step) > 0)){
position = 0;
$("#rightA").show();
$("#leftA").hide();
}else{
$("#rightA").show();
position = position + step;
}
//position = ((position + step) > 0) ? 0 : (position + step);
break;
default:
break;
};
$("#tab_dt").animate({ marginLeft: position + "px" },200 );
}
$(document).ready(function() {
//$("#slider").css("width", ($("body").attr("clientWidth") - 80) + "px");
$("#leftA").click(function() {
animate("left", 100);
});
$("#rightA").click(function() {
animate("right", 100);
});
});
//]]-->
</script>
</body>
</html>
分享到：
发表评论
-
粒子喷泉
2011-07-18 17:43 861注：来自http://daimaren.cn/blog/?p= ... -
jquery validate addMethod
2011-06-20 15:18 1536只能输入m-n个字符且至少有一个字母和一个数字 jQuer ... -
4个跨浏览器必备的函数
2011-05-26 13:58 738http://www.cssbaby.com/archives ... -
用jquery实现的文本框只能输入数字
2011-05-25 10:14 2279用jquery实现的文本框只能输入数字简单插件 $.fn. ... -
闭包理解
2011-04-28 11:51 812直接看到代码 var list = document.ge ... -
JS/DOM/Ajax/Framework(Jquery/Yui/Mootools/EXT)
2011-03-28 10:09 1054gotop效果 <script> var B ... -
jQuery 封装function
2011-03-25 16:37 1920// JavaScript Document (func ... -
利用浏览器默认方法获取浏览器当前位置
2011-03-19 13:53 1028支持浏览器 IE FIREFOX SAFARI CHROME ... -
关于用jQuery实现效果
2011-03-19 09:37 7901、效果1：关于新闻信息文字上下切换 <div i ... -
jquery实现键盘上下键、return键选折li
2011-03-16 11:42 6591注释：code来源javaeye 使用前要引入jquery库 ... -
随滚动条移动的层
2011-02-15 09:51 804<!DOCTYPE html PUBLIC &quo ... -
yui的学习脚印
2011-01-30 22:37 958<!DOCTYPE html PUBLIC &quo ... -
vim 使用
2011-01-21 17:08 681vim命令 vi和vim是linux和u ... -
javascript基础知识
2011-01-19 09:45 730注释：来自http://www.csssea.com/?p=7 ... -
Javascript浏览器兼容问题
2011-01-14 00:13 1021Javascript浏览器兼容 1.doc ... -
一个简单的javascript tab选项卡
2011-01-13 20:51 1090<!DOCTYPE html PUBLIC &quo ... -
常用的正则表达式
2011-01-10 13:47 654/** *postal codes regular ... -
一些比较实用的javascript方法
2011-01-10 13:25 906动态加载javascript文件 <script t ... -
javacript实现根据选择不同国家选择显示不同的省/州
2010-12-29 01:13 1451/** * @author wangxiang * ... -
javascript方法（Methods）
2010-12-28 23:49 9661、Array array.concat(item..) co ...
相关推荐
asp.net js左右滚动效果 源码 适合asp.net php 测试OK
在本文中，我们将深入探讨如何实现一个基于jQuery的图片左右滚动效果，这通常用于网站的轮播图或幻灯片展示。这个效果包含了左右箭头，可以手动切换，同时具备自动轮播的功能，大大增强了用户体验。 首先，我们需要...
### JS图片左右滚动效果代码详解 #### 一、概述 在网页设计中，为了增加页面的动态效果和提升用户体验，常常会用到图片滚动展示功能。本文将详细解析一段JavaScript代码，该代码能够实现图片左右自动滚动的效果，...
在网页设计中，左右滚动效果常用于展示轮播图、新闻列表或广告横幅等场景，为用户带来更加流畅的视觉体验。本文将深入解析一段JS代码，该代码实现了左右无缝滚动功能，并探讨其工作原理与关键技术点。 #### 代码...
在这个主题中，“js图片左右滚动效果”指的是利用JavaScript来创建一种动态展示图片的方式，使得图片能够在页面上从左到右或者从右到左自动滑动，给用户带来视觉上的流畅体验。 实现这种效果，主要涉及到以下几个...
"JS动态可控制左右滚动的图片代码.rar" 这个标题表明了压缩包中的内容是一个JavaScript代码实现的动态图片滚动效果。这种效果常见于网站的图片展示部分，用户可以通过点击或滑动按钮来控制图片的左右滚动，增加交互...
【jQuery网站新闻公告自动左右滚动切换代码】是网页设计中常见的一种动态效果，它通过JavaScript库jQuery实现，为网站的新闻或公告展示提供了一种吸引用户注意力的方式。这个功能允许内容在页面上以平滑的动画效果...
通过对这些代码的分析和学习，你可以理解并掌握如何利用JavaScript实现横向无缝左右滚动的图片展示效果。在实际应用中，还可以根据需求进行个性化定制，如添加分页指示器、自动播放功能、图片预加载策略等。
总的来说，"ifeng 图片左右滚动效果"是一个实用且美观的网页设计元素，它结合了JavaScript和CSS的力量，为用户提供了一种便捷的图片浏览方式，提升了网页的互动性和吸引力。在实际开发中，根据项目需求和用户群体，...
在本文中，我们将深入探讨如何使用原生JavaScript实现Vue组件中的左右无缝滚动效果，并结合CSS进行样式设计。Vue.js是一个流行的前端框架，它允许开发者构建可复用、可维护的组件，而原生JavaScript则是其背后的基石...
在"jquery广告上下左右滚动效果"项目中，我们主要关注的是动画效果部分。 1. **引入jQuery库**： 在HTML文件（如`图标滑动效果.html`）中，我们需要先引入jQuery库。这通常通过在`<head>`标签内添加`<script>`标签...
本篇文章将深入探讨如何利用JavaScript实现文字滚动效果，并提供相关的源码示例。 文字滚动效果通常分为两种类型：向上滚动和向下滚动。这种效果常用于新闻滚动、公告栏或者页眉信息展示。在JavaScript中，可以使用...
本教程将详细讲解如何使用JS实现图片的不间断左右循环滚动效果。 首先，我们需要理解核心概念：滚动。在网页中，滚动通常涉及到元素的动态移动，这可以通过改变其CSS属性来实现。这里的"不间断"意味着滚动效果应该...
【标题】"js图片左右滚动条切换.zip"所包含的知识点主要是关于JavaScript（JS）实现的图片滚动条交互效果，这种效果通常用于图片相册或展示类网站，以提供用户友好的图片浏览体验。在现代网页设计中，动态且可自定义...
在网页设计中，我们有时需要实现元素的左右滚动效果，这通常是为了提供更好的用户体验或者展示大量的数据。"JS左右滚动方向可控"就是这样一个功能，它允许用户通过点击按钮或使用键盘来控制内容在水平方向上的滚动。...
在网页设计中，图片左右滚动效果是一种常见的动态展示方式，它可以增强用户体验，吸引用户的注意力，尤其适用于产品展示、新闻轮播或广告展示等场景。这种效果通常由JavaScript库，如jQuery实现，因其强大的功能和...
"DIV新闻、图片滚动效果,上下左右方向,简洁JavaScript示例,高浏览器兼容性"是一个专注于使用JavaScript实现的DOM元素（尤其是DIV）滚动效果的教程或代码示例。这个示例旨在帮助开发者创建出具有新闻滚动、图片轮播等...
纯js实现点击左右按钮图片自动左右平滑滚动，默认5个一组左右滚动，可以手动修改js参数更改滑动数量 使用方法： 1、将head中的js以及lanrenzhijia.css样式引入到你的网页中 2、将body中的代码部分拷贝到...
"jQuery左右滚动效果(带停顿)"是一种常见的网页交互设计，它允许用户通过鼠标悬停或点击来浏览一串水平排列的内容，如图片、文本或者产品展示。这个效果利用了jQuery库的强大功能，使得滚动过程平滑且具有可控制的...
"JS左右滚动的图片切换效果"是一个常见的实现方法，它利用JavaScript库，尤其是jQuery，来创建一种平滑且互动性强的图片轮播功能。下面我们将深入探讨这个主题，了解其背后的原理和实现步骤。 首先，jQuery是一个...