jQuery实现的左右移动焦点图效果
更新时间：2016年01月14日 14:20:49 作者：乘着风在飞
这篇文章主要介绍了jQuery实现的左右移动焦点图效果,涉及jQuery结合时间函数响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现的左右移动焦点图效果。分享给大家供大家参考，具体如下：
jquery 部分：
$(function () {
var _speed = 1000;
var _len = 0;
var _size = 150;
var _direction = 'left';
function mar(){
if(_direction == 'left'){
if(_len >= 450){
_direction = 'right';
}else{
$(".flow ul").animate({"margin-left":"-=" + _size + "px"});
_len += _size;
}
}else{
if(_len <= 0){
_direction = 'left';
}else{
$(".flow ul").animate({"margin-left":"+=" + _size + "px"});
_len -= _size;
}
}
}
var _go = setInterval(mar,_speed);
$("#pic_left").click(function (){
_direction = 'left';
});
$("#pic_right").click(function (){
_direction = 'right';
});
$(".flow li").mouseover(function (){
clearInterval(_go);
}).mouseout(function (){
_go = setInterval(mar,_speed);
});
});
html 部分
<div class="salebox">
<A class="left" id="pic_left">left</A>
<DIV class="pcont" id="ISL_Cont_1">
<DIV class="ScrCont">
<div class="flowbox" style="width:150px; height:60px; overflow:hidden;float:left;">
<div class="flow" style="width:150px;height:60px;">
<ul >
<li><img src="__PUBLIC__/images/demo/01.jpg" mce_src="__PUBLIC__/images/demo/01.jpg" width="150px" height="60px"></li>
<li><img src="__PUBLIC__/images/demo/02.jpg" mce_src="__PUBLIC__/images/demo/02.jpg" width="150px" height="60px"></li>
<li><img src="__PUBLIC__/images/demo/03.jpg" mce_src="__PUBLIC__/images/demo/03.jpg" width="150px" height="60px"></li>
<li><img src="__PUBLIC__/images/demo/04.jpg" mce_src="__PUBLIC__/images/demo/04.jpg" width="150px" height="60px"></li>
</ul>
</div>
</div>
</DIV>
</DIV>
<A class="right" id="pic_right">right</A>
</div>
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。2009-10-10
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
本文主要讲诉了如何一起一步一步打造个性化的VirtualKeyboard：功能强大的Jquery虚拟键盘，非常的详细，非常实用，有需要的朋友可以参考下2014-10-10
目前做的这个项目中要用到用户头像功能，领导说最好是做成用户上传一个图片后可以用图像裁剪的方法自己选择头像。2009-05-05
这篇文章主要为大家详细介绍了jQuery实现全选、反选和不选功能 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
之前写的分页，操作时要把传的参数放到隐藏hidden中，比较麻烦，下面重新包装了一下,需要的朋友可以参考参考2014-06-06
这篇文章主要介绍了Jquery解析json字符串及json数组的方法,实例分析了jQuery操作json格式字符串与数组的相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了jquery.multiselect 多选下拉框实现代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
本文给大家分享的是jQuery实现购物车数字加减效果的3种实现方法，分别是左右加减数字、Bootstrap风格，右侧加减以及jQuery ui风格，右侧加减，效果非常棒，需要的小伙伴来参考下吧。2015-03-03
jquery popupDialog 使用 加载jsp页面的方法
下面小编就为大家带来一篇jquery popupDialog 使用 加载jsp页面的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
cookie，localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同，今天小编通过本文给大家分享jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法，需要的朋友参考下吧2017-10-10
最新评论