jquery实现图片水平滚动效果代码分享
作者：bea
本文实例讲述了jquery实现图片水平滚动效果，分享给大家供大家参考。具体如下： 运行效果图：-------------------查看效果------------------- 小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的jquery实现图片水平滚动效果代码如下 <HEAD><META content="text/html; charset=gb2312" http-equiv="Content-Type"><
本文实例讲述了jquery实现图片水平滚动效果，分享给大家供大家参考。具体如下： 运行效果图：-------------------查看效果-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的jquery实现图片水平滚动效果代码如下
<HEAD>
<META content="text/html; charset=gb2312" http-equiv="Content-Type">
<TITLE>jquery实现图片水平滚动效果</TITLE>
<LINK rel="stylesheet" type="text/css" href="css/style.css">
<SCRIPT type="text/javascript" src="js/ga.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.js"></SCRIPT>
</HEAD>
<BODY>
<!--演示内容开始-->
<SCRIPT type="text/javascript" src="js/jquery.min.1.5.1.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.ui.1.8.10.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jCoverflip.js"></SCRIPT>
<DIV class="artist_flow_contn">
<UL id="flip" class="ui-jcoverflip">
<LI style="left: 80px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 120px; display: inline-block;" border="0" src="images/01.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN></LI>
<LI style="left: 220px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 160px; display: inline-block;" border="0" src="images/02.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN></LI>
<LI style="left: 400px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 120px; display: inline-block;" border="0" src="images/03.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN></LI>
<LI style="left: 530px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 120px; display: inline-block;" border="0" src="images/04.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN></LI>
<LI style="left: 660px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 120px; display: inline-block;" border="0" src="images/05.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN></LI>
<LI style="left: 790px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 120px; display: inline-block;" border="0" src="images/06.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">div+css多张背景图片规范写法图片透明度显示</A></SPAN></LI>
<LI style="left: 920px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 120px; display: inline-block;" border="0" src="images/07.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">CSS如何定位工程</A></SPAN></LI>
<SPAN style="display: none; opacity: 0;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">CSS如何定位工程</A></SPAN><SPAN style="display: none; opacity: 0;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">div+css多张背景图片规范写法图片透明度显示</A></SPAN><SPAN style="display: none; opacity: 0;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN><SPAN style="display: none; opacity: 0;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN><SPAN style="display: none; opacity: 0;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN><SPAN style="display: block; opacity: 1;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN><SPAN style="display: none; opacity: 0;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN>
</UL>
<DIV id="scrollbar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><A
style="left: 16.66%;" class="ui-slider-handle ui-state-default ui-corner-all"
href="#"></A></DIV>
</DIV>
<SCRIPT type="text/javascript">
$(document).ready(function(){
// cover flip effects //
//var noOfArtists = 31; //jx
var noOfArtists = 7; //jx
$('#flip').jcoverflip({
current: 0,
beforeCss: function(el, container, offset){
return [$.jcoverflip.animationElement(el, {
left: (container.width() / 2 - 220 - 150 * offset + 20 * offset) + 'px',
bottom: '20px'
}, {}), $.jcoverflip.animationElement(el.find('img'), {
width: Math.max(10, 120 - 0 * offset * offset) + 'px'
}, {})];
},
afterCss: function(el, container, offset){
return [$.jcoverflip.animationElement(el, {
left: (container.width() / 2 + 100 + 130 * offset) + 'px',
bottom: '20px'
}, {}), $.jcoverflip.animationElement(el.find('img'), {
width: Math.max(10, 120 - 0 * offset * offset) + 'px'
}, {})];
},
currentCss: function(el, container){
return [$.jcoverflip.animationElement(el, {
left: (container.width() / 2 - 80) + 'px',
bottom: '20px'
}, {}), $.jcoverflip.animationElement(el.find('img'), {
width: '160px'
}, {})];
},
change: function(event, ui){
//jx $('#scrollbar').slider('value', ui.to * 10);
$('#scrollbar').slider('value', ui.to * (100 / (noOfArtists - 1))); //jx
}
});
$('#scrollbar').slider({
//jx value: 50,
value: 0, //init. pic is the beginning of the artists list, so change from 50 (middle) to 0
//jx step: 10,
step: 100 / (noOfArtists - 1), //jx
stop: function(event, ui){
if (event.originalEvent) {
//jx var newVal = Math.round(ui.value / 10);
var newVal = Math.round(ui.value / 100 * (noOfArtists - 1)); //jx
$('#flip').jcoverflip('current', newVal);
//jx $('#scrollbar').slider('value', newVal * 10);
$('#scrollbar').slider('value', newVal / (noOfArtists - 1) * 100); //jx
}
}
});
// cover flip effects //
});
</SCRIPT>
<!--演示内容结束-->
</BODY>
</HTML>
以上就是为大家分享的jquery实现图片水平滚动效果代码，希望大家可以喜欢。
有用 | 无用
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的jquery实现图片水平滚动效果代码如下
<HEAD>
<META content="text/html; charset=gb2312" http-equiv="Content-Type">
<TITLE>jquery实现图片水平滚动效果</TITLE>
<LINK rel="stylesheet" type="text/css" href="css/style.css">
<SCRIPT type="text/javascript" src="js/ga.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.js"></SCRIPT>
</HEAD>
<BODY>
<!--演示内容开始-->
<SCRIPT type="text/javascript" src="js/jquery.min.1.5.1.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.ui.1.8.10.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jCoverflip.js"></SCRIPT>
<DIV class="artist_flow_contn">
<UL id="flip" class="ui-jcoverflip">
<LI style="left: 80px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 120px; display: inline-block;" border="0" src="images/01.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN></LI>
<LI style="left: 220px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 160px; display: inline-block;" border="0" src="images/02.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN></LI>
<LI style="left: 400px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 120px; display: inline-block;" border="0" src="images/03.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN></LI>
<LI style="left: 530px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 120px; display: inline-block;" border="0" src="images/04.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN></LI>
<LI style="left: 660px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 120px; display: inline-block;" border="0" src="images/05.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN></LI>
<LI style="left: 790px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 120px; display: inline-block;" border="0" src="images/06.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">div+css多张背景图片规范写法图片透明度显示</A></SPAN></LI>
<LI style="left: 920px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG
style="width: 120px; display: inline-block;" border="0" src="images/07.jpg"></A><SPAN
style="display: none;" class="title"><A href="#"
target="_blank">CSS如何定位工程</A></SPAN></LI>
<SPAN style="display: none; opacity: 0;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">CSS如何定位工程</A></SPAN><SPAN style="display: none; opacity: 0;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">div+css多张背景图片规范写法图片透明度显示</A></SPAN><SPAN style="display: none; opacity: 0;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN><SPAN style="display: none; opacity: 0;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN><SPAN style="display: none; opacity: 0;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN><SPAN style="display: block; opacity: 1;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN><SPAN style="display: none; opacity: 0;"
class="title ui-jcoverflip--title"><A href="#"
target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN>
</UL>
<DIV id="scrollbar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><A
style="left: 16.66%;" class="ui-slider-handle ui-state-default ui-corner-all"
href="#"></A></DIV>
</DIV>
<SCRIPT type="text/javascript">
$(document).ready(function(){
// cover flip effects //
//var noOfArtists = 31; //jx
var noOfArtists = 7; //jx
$('#flip').jcoverflip({
current: 0,
beforeCss: function(el, container, offset){
return [$.jcoverflip.animationElement(el, {
left: (container.width() / 2 - 220 - 150 * offset + 20 * offset) + 'px',
bottom: '20px'
}, {}), $.jcoverflip.animationElement(el.find('img'), {
width: Math.max(10, 120 - 0 * offset * offset) + 'px'
}, {})];
},
afterCss: function(el, container, offset){
return [$.jcoverflip.animationElement(el, {
left: (container.width() / 2 + 100 + 130 * offset) + 'px',
bottom: '20px'
}, {}), $.jcoverflip.animationElement(el.find('img'), {
width: Math.max(10, 120 - 0 * offset * offset) + 'px'
}, {})];
},
currentCss: function(el, container){
return [$.jcoverflip.animationElement(el, {
left: (container.width() / 2 - 80) + 'px',
bottom: '20px'
}, {}), $.jcoverflip.animationElement(el.find('img'), {
width: '160px'
}, {})];
},
change: function(event, ui){
//jx $('#scrollbar').slider('value', ui.to * 10);
$('#scrollbar').slider('value', ui.to * (100 / (noOfArtists - 1))); //jx
}
});
$('#scrollbar').slider({
//jx value: 50,
value: 0, //init. pic is the beginning of the artists list, so change from 50 (middle) to 0
//jx step: 10,
step: 100 / (noOfArtists - 1), //jx
stop: function(event, ui){
if (event.originalEvent) {
//jx var newVal = Math.round(ui.value / 10);
var newVal = Math.round(ui.value / 100 * (noOfArtists - 1)); //jx
$('#flip').jcoverflip('current', newVal);
//jx $('#scrollbar').slider('value', newVal * 10);
$('#scrollbar').slider('value', newVal / (noOfArtists - 1) * 100); //jx
}
}
});
// cover flip effects //
});
</SCRIPT>
<!--演示内容结束-->
</BODY>
</HTML>
以上就是为大家分享的jquery实现图片水平滚动效果代码，希望大家可以喜欢。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- javascript中html字符串转化为jquery dom对象的方法
- javascript 动态修改css样式方法汇总(四种方法)
- JavaScript实现带箭头标识的多级下拉菜单效果
- javascript引用类型之时间Date和数组Array
- jQuery实现的数值范围range2dslider选取插件特效多款代码分享
- jQuery手机拨号界面特效代码分享
- JS实现自动切换文字的导航效果代码
- javascript实现自动输出文本（打字特效）
- jquery+php随机生成红包金额数量代码分享
- javascript模拟C#格式化字符串
- jQuery实现滚动切换的tab选项卡效果代码
- 基于jquery实现一个滚动的分步注册向导-附源码
- jQuery带时间的日期控件代码分享
- js仿苹果iwatch外观的计时器代码分享
- jQuery下拉友情链接美化效果代码分享
- jQuery ui实现动感的圆角渐变网站导航菜单效果代码
- jquery实现平滑的二级下拉菜单效果
- 纯javascript实现分页(两种方法)
- jquery实现LED广告牌旋转系统图片切换效果代码分享