图片滚动代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
div.scrollMenu{
width:500px;
height:120px;
overflow: hidden;
border:1px solid red;
}
ul.scrollMenu{
list-style-type: none;
width:1280px;
height:100px;
margin:0;
}
.scrollMenu li{
float:left;
width:70px;
margin-top:30px;
text-align:center;
padding: 0 0 20px 20px;
}
.scrollMenu img{
text-align:center;
display: block;
}
.scrollMenu span{
display: block;
font-weight:bold;
}
</style>
<script language="javascript" src="jquery-1.6.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
var div = $("div.scrollMenu"),
ul = $("ul.scrollMenu");
div.mousemove(function(e){
var left = (e.pageX - div.offset().left)*(div.width()-ul.width())/div.width();
$("#show").html(-left);
div.scrollLeft(-left);
});
});
</SCRIPT>
</HEAD>
<BODY>
<div class="scrollMenu" title="图片横向滚动">
<ul class="scrollMenu">
<li><img src="Add.png"/><span> </span></li>
<li><img src="Address_Book.png"><span> </span></li>
<li><img src="Alert.png"><span> </span></li>
<li><img src="Announcement.png"><span> </span></li>
<li><img src="Back.png"><span> </span></li>
<li><img src="Bin_Empty.png"><span> </span></li>
<li><img src="Bin_Full.png"><span> </span></li>
<li><img src="Box.png"><span> </span></li>
<li><img src="Burn.png"><span> </span></li>
<li><img src="Calender.png"><span> </span></li>
<li><img src="CD.png"><span> </span></li>
<li><img src="Chat.png"><span> </span></li>
<li><img src="Clock.png"><span> </span></li>
<li><img src="Close.png"><span> </span></li>
<li><img src="Computer.png"><span> </span></li>
<li><img src="Contact.png"><span> </span></li>
<li><img src="Database.png"><span> </span></li>
<li><img src="Delete.png"><span> </span></li>
</ul>
</div>
<div id="show"></div>
</BODY>
</HTML>
分享到：
相关推荐
本教程将详细讲解如何利用jQuery实现一个“超酷横向滚动带倒影”的照片展示功能，同时包含横向滚动条并支持用户拉动操作。 首先，我们需要在HTML结构中设置一个容器来存放图片。这个容器可以是一个`<div>`元素，...
【jQuery带缩略图横向滚动切换代码】是一个用于创建交互式图片展示的JavaScript库，特别适合用于网页中的图片相册效果。这个库基于流行的jQuery框架，利用其强大的DOM操作和事件处理能力，实现了用户在浏览缩略图时...
在图片的展示上，可以使用CSS的`display: inline-block`或者`float: left`属性来使图片并排显示，从而实现横向滚动的效果。记得在图片的`width`属性上设置合适的值，确保它们可以在有限的空间内水平排列。 最后，...
【横向滚动jQuery导航菜单】是一种常见的网页交互设计，它允许用户在水平方向上浏览菜单项，为网站增加了一种现代且动态的用户体验。在本文中，我们将深入探讨如何使用jQuery实现这种效果，以及相关的HTML、CSS和...
标题中的“jquery图片横向滚动展示插件”是指一种基于JavaScript库jQuery开发的插件，用于在网页上创建图片水平滑动的展示效果。这种插件通常适用于产品展示、相册浏览或其他需要动态显示多张图片的场景。它通过提供...
【jQuery商品图片横向自动滚动轮播代码】是一种常见的网页交互设计，用于展示商品图片，提升用户体验。这种轮播效果能够使商品图片以横向的方式自动滚动，用户也可以通过左右箭头手动控制图片的切换。在鼠标悬停时，...
"实用的jQuery横向无限循环滚动插件"是一个专门为网页设计的动态效果插件，它允许网页上的内容（如图片、文本或产品展示）以横向无限循环的方式进行滚动，从而提供一种流畅且引人注目的用户体验。这种被称为"自动...
【横向滚动jQuery导航代码】是一种常见的网页交互设计技术，它为用户提供了一种创新且直观的浏览方式，尤其适用于展示大量菜单选项或者长列表内容。在网页设计中，使用jQuery实现的横向滚动导航能够提高用户体验，...
标题中的“jquery横向托拽排序滚动表格”是一个用于尺码管理的交互式表格，它结合了jQuery库的特性，使得用户可以通过拖动列头来实现表格的横向排序。这种功能在数据管理和展示时非常实用，尤其对于需要频繁调整列...
标题中的"jQuery带缩略图横向滚动banner大图切换代码.zip"表明这是一个使用jQuery库实现的，具有缩略图导航的横向滚动横幅（banner）图片切换效果的项目。这个项目可能包含一个主要的HTML文件（index.html），用于...
本资源 "[荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好).rar" 提供了一个使用jQuery实现的、具有Flash风格的横向图片滚动效果。这种效果可以为网站增添动态视觉吸引力，同时由于基于jQuery，所以具备...
【jQuery全屏滑块拖动横向图片滚动】是一款利用JavaScript库jQuery实现的高效能、用户交互性强的网页图片展示方案。这种特效使得网页中的图片能够全屏显示，并且支持通过鼠标滚轮或直接拖动来实现横向的平滑滚动，为...
在创建横向滚动广告时，jQuery提供了一系列实用的方法和函数，如`.animate()`用于创建平滑的动画效果，`.slideToggle()`用于显示或隐藏元素，以及`.next()`和`.prev()`用于遍历相邻的DOM元素。 描述虽然简短，但...
非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等,可以做为你的学习设计参考。 jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 ...jquery版自动滚动图片动画特效插件
【图片横向滚动js特效】是一种常见的网页动态效果，主要用于展示多张图片，通过横向滑动的方式增加用户体验，常用于产品展示、相册或新闻轮播等场景。在网页设计中，JavaScript（简称js）被广泛用来实现这类交互式...
标题中的“jquery按钮控制横向滑块图片滚动展示_拖动滑块图片滚动展示”涉及到的是一个使用jQuery库实现的交互式网页元素，通常在电商网站或产品展示页面中常见。这个功能允许用户通过点击按钮或者直接拖动滑块来...
在实现多图横向滚动时，jQuery的主要作用是监听用户的交互，如鼠标滚轮、箭头键或触摸滑动，然后根据这些事件触发图片的平滑滚动。 CSS（层叠样式表）在实现多图横向滚动中负责图片的布局和样式设定。通常，我们会...
【标题】：“网站\腾讯网横向滚动轮播鼠标经过图片显示标题特效”指的是在网站设计中，采用的一种常见用户体验优化技术。这种技术通常应用于新闻、产品展示或广告区域，通过横向滚动的方式展示多张图片，并在鼠标...