图片滚动代码如下:
<!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带缩略图横向滚动切换代码是一款鼠标经过缩略小图可以自动切换图片特效下载。
一款带左右箭头按钮控制的jQuery商品图片横向自动滚动轮播代码,鼠标悬停图片透明度变化高亮效果。
Jquery全屏滑块拖动横向图片滚动是一款支持鼠标滚动滚动切换的jquery特效。
非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等,可以做为你的学习设计参考。 jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 ...jquery版自动滚动图片动画特效插件
横向滚动jQuery导航菜单,鼠标移到某个栏目时,下滑线光标会跟随指出要去的栏目,移走后会自动回到当前栏目。
自己为公司做的一个尺码管理表,jquery横向托拽排序滚动表格,鼠标滑过,json数据,采用ul li实现,需要php环境支持,或者你直接修改源代码的json赋值
横向无缝的图片滚动,两端带左右控制按钮,需要鼠标点击按钮才会滚动,点一下滚动一下,这是Jquery jcarousel插件应用实用例子,演示文档虽然是HTML格式,但由代码来看,在ASP/PHP/ASP.NET中使用也很方便,而且图片...
12. jQuery仿动感flash自动滚动图片切换广告插件 13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery...
Jquery全屏滑块拖动横向图片滚动是一款支持鼠标滚动滚动切换的jquery特效。
最近这两天一直在为大家分享一些HTML5、CSS和SVG的炫酷动画,...这次我们来介绍一款实用的jQuery进度条插件,这款jQuery进度条插件的外观利用了CSS3的特性,让进度条外观显得非常时尚漂亮,一共有10种样式,非常实用。
12. jQuery仿动感flash自动滚动图片切换广告插件 13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery...
Horwheel是一个插件让您的鼠标滚轮支持横向滚动。这是跨浏览器兼容的。演示地址:http://www.jq22.com/jquery-info524
jQuery带缩略图横向滚动切换代码是一款鼠标经过缩略小图可以自动切换图片特效下载。
内容索引:脚本资源,jQuery,图片滚动,jcarousel,Jquery插件 Jquery jcarousel插件应用实用:横向无缝的图片滚动,两端带左右控制按钮,需要鼠标点击按钮才会滚动,点一下滚动一下,演示文档虽然是HTML格式,但由代码...
插件描述:onepage鼠标滚动一下换一屏展示网页. 参考示例:http://www.jq22.com/jquery-info5544
jQuery商品图片横向轮播代码是一款带左右按钮控制的商品图片自动轮播滚动展示,悬停图片透明高亮效果代码。
12. jQuery仿动感flash自动滚动图片切换广告插件 13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery...
JS无缝图片滚动,横向和横向滚动二例,响应鼠标停止,无使用jQuery,图片滚动应用广泛,本代码在IE8、火狐等浏览器下兼容性好,代码效率高,而且代码也很少,方便大家嵌入到自己的网页中,运行效果如上图所示。
Sly 是一个可实现内容滚动幻灯片的jQuery 插件,支持显示图片、文字等其它 HTML 元素。支持鼠标滚轮。它提供了滚动条、前后浏览按钮等多种导航方式,并且内置了不同的导航逻辑,可让你打造出非常给力的内容滚动效果...
12. jQuery仿动感flash自动滚动图片切换广告插件 13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery...