- 浏览: 218837 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
husw:
不错,感谢分享!
fixed仿淘宝工具栏效果(两种) -
08tankuai:
试了一下!还不错,谢谢。
利用CSS让容器的溢出部分内容隐藏起来,smarty就可以不用截取字符串了 -
m2maomao:
yxyysu 写道明 白 了。恩,非常easy的。
让框架Frameset居中,并且固定宽度的巧妙办法 -
yxyysu:
明 白 了。
让框架Frameset居中,并且固定宽度的巧妙办法 -
yxyysu:
楼主,这段代码是什么意思呢?
为什么能出现这样的效果呢?
让框架Frameset居中,并且固定宽度的巧妙办法
迷上jQuery,相对于原生JavaScript,它是如此的美妙.也因此,促使我更加的努力的研习原生JavaScript.
分享一个控制左右滚动及自动滚动的样例, 昨晚花了两个多小时, 忍受着悍蚊的叮咬, 汗水的侵袭, 一行行的敲出来的血汗代码. 哈哈.
封装了两种模式: 点击滚动版本DEMO
自动滚动版本DEMO
,源码中有详细注释.
思路:
点击滚动模式
下,是为点击(向前/向后/数字)添加click
事件,通过控制展示区块left
值实现切换.
1.向前(左):当在第一个版面时,滚动到最后一个页面,否则,累加left
值,向前滚动;
2.向后(右):当在最后一个版面时,滚动到第一个页面,否则,累减left
值,向后滚动;
3.数字点击:利用index(…)
获取当前点击在数字列表中的索引值, 然后索引值为倍数为外围宽度负值.即可达到切换.
核心代码:
$ pre . click ( function (){
if ( !$ showbox . is ( ' :animated ' )) { //判断展示区是否动画
if ( $ cur == 1 ) { //在第一个版面时,再向前滚动到最后一个版面
$ showbox . animate ({
left : ' -= ' + $ w * ( $ pages - 1 )
} , 500 ) ; //改变left值,切换显示版面,500(ms)为滚动时间,下同
$ cur = $ pages ; //初始化版面为最后一个版面
}
else {
$ showbox . animate ({
left : ' += ' + $ w
} , 500 ) ; //改变left值,切换显示版面
$ cur --; //版面累减
}
$ num . eq ( $ cur - 1 ) . addClass ( ' numcur ' ) . siblings () . removeClass ( ' numcur ' ) ; //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
}
}) ;
//@Mr.Think***向后滚动
$ next . click ( function (){
if ( !$ showbox . is ( ' :animated ' )) { //判断展示区是否动画
if ( $ cur == $ pages ) { //在最后一个版面时,再向后滚动到第一个版面
$ showbox . animate ({
left : 0
} , 500 ) ; //改变left值,切换显示版面,500(ms)为滚动时间,下同
$ cur = 1 ; //初始化版面为第一个版面
}
else {
$ showbox . animate ({
left : ' -= ' + $ w
} , 500 ) ; //改变left值,切换显示版面
$ cur ++; //版面数累加
}
$ num . eq ( $ cur - 1 ) . addClass ( ' numcur ' ) . siblings () . removeClass ( ' numcur ' ) ; //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
}
}) ;
//@Mr.Think***数字点击事件
$ num . click ( function (){
if ( !$ showbox . is ( ' :animated ' )) { //判断展示区是否动画
var $ index = $ num . index ( this ) ; //索引出当前点击在列表中的位置值
$ showbox . animate ({
left : ' - ' + ( $ w * $ index )
} , 500 ) ; //改变left值,切换显示版面,500(ms)为滚动时间
$ cur = $ index + 1 ; //初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1
$ ( this ) . addClass ( ' numcur ' ) . siblings () . removeClass ( ' numcur ' ) ; //为当前点击加上高亮样式,并移除同级元素的高亮样式
}
}) ;
自动滚动模式
是基于点击滚动模式加强的,无非是添加了自动滚动事件,以及当鼠标划上时清除动画事件.
这里要说明一点.DEMO演示中,为向前/向后/数字/区域都添加了当鼠标划过时都添加了清除动画事件.但是,如果你的页面中,这几个需要添加清除动画事件的都在同一个区域内,完全可以用trigger(…)
模拟实现自动滚动.
还有一点,自动滚动中是用setTimeout(“fun”,interval)
实现,而不用setInterval(“fun”,interval)
实现. 原因在于,setInterval
是在间隔时间后重复执行传入的函数,而setTimeout
只在间隔时间后执行一次函数传入函数,这样即可避免第二次鼠标划入停止动画区域时不能清除动画.
核心代码:
//@Mr.Think***调用自动滚动
autoSlide () ;
......
//@Mr.Think***停止滚动
clearFun ( $ showbox ) ;
clearFun ( $ pre ) ;
clearFun ( $ next ) ;
clearFun ( $ num ) ;
//@Mr.Think***事件划入时停止自动滚动
function clearFun ( elem ){
elem . hover ( function (){
clearAuto () ;
} , function (){
autoSlide () ;
}) ;
}
//@Mr.Think***自动滚动
function autoSlide (){
$ next . trigger ( ' click ' ) ;
$ autoFun = setTimeout ( autoSlide , 3000 ) ; //此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效
}
//@Mr.Think***清除自动滚动
function clearAuto (){
clearTimeout ( $ autoFun ) ;
}
更详细代码分析,请查看源码,写有详细的注释.
原文发表于Mr.Think的博客:http://mrthink.net/jquery-clickslide-autoslide-showimg/ 转载请注明
发表评论
-
Javascript 严格模式详解
2015-11-10 11:32 441一、概述 除了正常运 ... -
Javascript 装载和执行
2015-09-17 14:17 479一两个月前在淘宝内网里看到一个优化Javascript代码的 ... -
IE6、7下li元素的子元素为dl,ul,ol时产生的bug
2015-09-15 14:54 561话不多说,先看测试代码: 该段代码在标准浏览器(包括 ... -
Web前端开发和JS面向对象编程分享 一、前端开发的重要性 1. Web2.0、AJAX、JSON、用户体验 2. HTML5、微网、移动互联网
2015-09-15 11:20 1479Web前端开发和JS面向对象编程分享 一、前端 ... -
JS复制内容(兼容IE和Firefox)
2012-11-05 11:46 877// <![CDATA[ function copy_ ... -
javascript深入理解js闭包,js 闭包
2012-05-28 23:20 688一、变量的作用域 要理解闭包,首先必须理解Javascrip ... -
IE和Firefox浏览器下javascript、CSS兼容性研究
2012-04-24 17:04 642为了将公司的产品在IE和Firefox下达到兼容,前段时间做了 ... -
JS随机显示指定数量图片
2012-03-08 16:52 712现有50张图片 1.jpg;2.jpg;3.jpg;4. ... -
js数组的操作
2012-03-05 21:34 642js数组的操作 用 js有很久了,但都没 ... -
10个非常有用的CSS技巧(m2maomao修正版)
2011-09-29 17:16 6091. 将网页或元素居中 HTML: <d ... -
JS获取浏览器高度和宽度
2011-09-22 14:21 703IE中: document.body.clientWidth ... -
代码 设为主页 加入收藏 代码
2010-09-05 03:48 816设为首页: <a href="#&qu ... -
select链接
2010-01-04 21:49 922select链接 <select onchange=& ... -
Mootools教程
2009-07-24 17:52 4632mootools【一】- 起步篇 以前一直在用protot ... -
js控制li背景色[超越CSS]
2009-06-24 11:46 2593<!DOCTYPE html PUBLIC &quo ... -
典型JavaScript使用技巧精萃
2009-05-05 10:48 808(一).确认删除用法: 1. BtnDel.A ... -
107条Javascript的常用语句
2009-05-04 11:31 7061. document.write( &quo ... -
网站通过API调用GG地图.
2009-03-24 14:41 1496网站通过API调用GG地图. http://www.biexi ... -
应用最广的十大Javascript框架
2009-03-23 17:17 846【CSDN 2月20日消息】近日,知名技术开发网站SYS-CO ... -
设为首页JS,加入收藏夹js,加入收藏夹代码,设为首页代码,火狐和ie兼容
2009-03-03 16:11 6899在一次设置中发现火狐浏览器(FF)不支持普通的象IE那样的加入 ...
相关推荐
基于Jquery图片点击上下滚动效果,代码比较简单也比较简洁。
分享一个控制左右滚动及自动滚动的样例, 昨晚花了两个多小时, 忍受着悍蚊的叮咬, 汗水的侵袭, 一行行的敲出来的血汗代码. 哈哈. 封装了两种模式: 点击滚动版本DEMO 自动滚动版本DEMO,源码中有详细注释. 思路: 点击...
点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: 代码如下: <!DOCTYPE html> <html lange=”en”> <head> <title>点击左右按钮图片横向滚动&...
jquery叠加效果自动滚动切换特效是一款基于jquery实现的叠加滚动特效代码。
101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐jquery仿Flash大banner图片切换播放特效,非常完美 103. 推荐jQuery仿新浪QQ绝...
基于jQuery的大幅文字+图片滚动变幻的动画布局示。 自动播放 默认周期4秒; 点击左右按钮 手动左右滚动; 点击新闻列表 渐入渐出切换; 响应键盘 上下左右键. 效果很酷,适用于含图片以及介绍的新闻标题列表。
基于jQuery实现的内容层叠滚动切换动画效果源码(支持自动切换).zip
63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典...
63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典...
63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典...
一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止自动滚动,鼠标离开自动滚动,点击左右按钮左右滚动Logo切换网页特效。可用于网站底部作为合作...
主要介绍了jquery插件之文字间歇自动向上滚动效果代码,涉及jquery基于时间函数定时触发页面元素变换实现滚动效果的相关技巧,需要的朋友可以参考下
基于jQuery的控制左右滚动效果_自动滚动版本</title> [removed][removed] <style> body{font-size:0.8em;letter-spacing:1px;font-family:”微软雅黑”; line-height:1.8em} div,ul,li,ol,img{margin:0;...
一、J Query实例大全 ...一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery定时图片切换代码下载 78.一款实用经典jQuery图片切换展示插件下载 79.下载jQuery动感广告图片翻转插件(PictureRoll)...
两款漂亮的图片切换,滚动形式效果,基于jQuery实现,一个是用鼠标点击按钮后才切换图片,另一个是鼠标放上就切换,两款都支持自动播放,希望大家喜欢哦,用在自己的网站上肯定挺漂亮哦。
1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换...这是一款基于jQuery实现的仿苹果官网页面上下滚动全屏效果源码,鼠标滑动页面上下翻页即可看到网站页面的全屏