jauery图片切换特效，jquery图片特效（缩略图+文字说明+左右方向按钮）-广告特效-ab蓝学网
当前位置: &
jauery图片切换特效，jquery图片特效（缩略图+文字说明+左右方向按钮）
简介:网页特效|jauery图片切换特效，jquery图片特效（缩略图+文字说明+左右方面按钮），缩略图在下方，同时有两个红色漂亮的左右方向按钮，双击图片是放大图片的网页特效代码，还是弹出层居中显示大图正常显示的图片...
jauery图片切换特效，jquery图片特效（缩略图+文字说明+左右方面按钮），缩略图在下方，同时有两个红色漂亮的左右方向按钮，双击图片是放大图片的代码，还是弹出层居中显示大图
正常显示的图片特效
双击图片后的显示特效
转载注明本文地址：
如果觉得《jauery图片切换特效，jquery图片特效（缩略图+文字说明+左右方向按钮）》不错，请把本站告诉您身边的朋友！
上一编：下一编：
正在加载 jauery图片切换特效，jquery图片特效（缩略图+文字说明+左右方向按钮） 评论...$(".update_1").poshytip('destroy');
$('.update_1').poshytip({
content: updatecountdiv,
className: 'tip-yellowsimple-update',
showOn: 'none',
alignTo: 'target',
alignX: 'right',
alignY: 'right',
offsetY: -25,
offsetX: -13,
liveEvents: true
$('.update_1').poshytip('show');
jquery图片处理实例-轻松实现图片情景的切换
时间就是金钱 ，当前时间：
日期： 00:05:31 来源：
& & & & &&的效果在之前的里都很少碰到，今天在浏览国外技术网站的时候刚好碰到一个效果不错的，特意来给大家分享一下。功能是通过移动鼠标光标来轻松的给两张图片之间进行切换，十分的实用。& & & &&$(document).ready(function()&{
//&一些专用的参数
var&leftgap&=&10;/*&&左边的距离&*/
var&rightgap&=&10;/*&右边的距离&*/
var&defaultgap&=&50;/*&文字介绍的距离&*/
var&caption&=&/*&标题切换&*/
var&reveal&=&0.5;/*&&定义0到1的范围来控制显示第二
个标题的切换&*/
//找到类名为&.beforeafter&并执行each事件
$('.beforeafter').each(function&()&{
//设置当前选定项为变量
var&i&=&$(this);
//获取第一张和第二张图片（使用eq(index)的方法）
var&img_mask&=&i.children('img:eq(0)').attr('src');
var&img_bg&=&i.children('img:eq(1)').attr('src');
//用默认标题给首张图片设置标题
var&img_cap_one&=&i.children('img:eq(0)').attr('alt');
//获取第一张图片的尺寸，假设第二张图片也是相同的尺寸
var&width&=&i.children('img:eq(0)').width();
var&height&=&i.children('img:eq(0)').height();
//隐藏图片，无需移除它是因为我们稍后将会使用它
i.find('img').hide();
//给当前的项设置一些css样式来装饰
i.css({'overflow':&'hidden',&'position':&'relative'});
//添加额外的html元素
i.append('&div&class=&ba-mask&&&/div&');
i.append('&div&class=&ba-bg&&&/div&');
i.append('&div&class=&ba-caption&&'&+&img_cap_one&+&
'&/div&');
//设置附加了的html元素的尺寸
i.children('.ba-mask,&.ba-bg').width(width);
i.children('.ba-mask,&.ba-bg').height(height);
//给ba-mask&和&ba-bg&设置图片作为背景
i.children('.ba-mask').css('backgroundImage','url('&+&
img_mask&+&')');
i.children('.ba-bg').css('backgroundImage','url('&+&
img_bg&+&')');
//动态地显示背景图片
i.children('.ba-mask').animate({'width':width&-&
defaultgap},&1000);
//如果说明文字是真的，就显示它，否则隐藏它
if&(caption)&i.children('.caption').show();
else&i.children('.ba-caption').hide();
}).mousemove(function&(e)&{
//给当前被选项设置变量
var&i&=&$(this);
//获取图片的位置
pos_img&=&i.offset()['left'];
//获取鼠标的位置
pos_mouse&=&e.pageX;
//计算图片和光标的差，这个差决定了遮盖图片的宽度
new_width&=&pos_mouse&-&pos_
img_width&=&i.width();
//获取第一张和第二张图片的描述文字
img_cap_one&=&i.children('img:eq(0)').attr('alt');
img_cap_two&=&i.children('img:eq(1)').attr('alt');
//&&&&处于测试目的
$('#debug').html(&X&Axis&:&&&+&e.pageX&+&&&|&Y&Axis&&&+&
$('#debug2').html(i.position()['left']);
$('#debug3').html(new_width);
//&确保显示图像的左右两边留下一些空白，
//这取决于左边和右边空白的值
if&(new_width&&&leftgap&&&&new_width&&&(img_width&-&
rightgap))&{
i.children('.ba-mask').width(new_width);
//&&切换文字
//&&它使用的显示图片的这个来计算
//例如，当遮罩图片的值到了0.5的时候，两个文字描述进行切
if&(new_width&&&(img_width&*&reveal))&{
i.children('.ba-caption').html(img_cap_two);
i.children('.ba-caption').html(img_cap_one);
注册仅几秒，作品伴一生。本站注册只为大家能把喜欢的作品进行收藏以供后用
相关文章推荐
绚丽的文字特效-lettering个性化文字排版
本次介绍的插件叫Lettering.js，是一个十分轻量的，
/news/9/jquery-lettering-plugin
图片走廊，展现图片之美-fancybox图片查看器
fancyBox是一个能够给图片，html内容和多媒体内容提
/news/10/jquery-fancybox-plugin
JQuery-fullscreen图片全屏并保持宽高比例的背景图
您可否曾经想过在您的网站上有一副时常 能填满屏幕而又能保持宽
/news/11/jquery-fullscreen-plugin
展示各类文件用这个，lightbox又一新作
今天为大家介绍的是又一个效果炫目的LightBox插件。 此
/news/12/jquery-lightbox-eachfiletype
Easy Image Zoom_一款轻量的图像缩放插件
功能简介：
1.鼠标放到略缩图上，图片放大。
/news/51/jquery-plugin-easy-image-zoom
代替传统的checkbox样式的jquery插件
本次介绍的jquery插件是将完全代替默认浏览器的表单che
/news/53/check-box-jquery-plugin
diagonalFade-轻松定制淡入淡出效果的JQuery插件
今天为大家介绍的是一款名为diagonalFade的jque
/news/55/diagonal-fade-jquery-plugin
jrumble-让元素动起来的插件
本次给大家介绍的是一款能让HTML震动，旋转，闪烁等效果的J
/news/56/jrumble-jquery-plugin
imageLens-为图片添加镜头放大效果
今天为大家介绍的是一款能为图片添加镜头放大效果的JQuery
/news/57/image-lens-jquery-plugin
一款效果很棒的JQuery标签输入插件
您可曾在您的网站上使用标签来组织内容？本次介绍的jquery
/news/58/jquery-tags-input-plugin
easyslider-jquery滑动插件，轻松实现幻灯片效果
今天为大家分享的是一款用于图片轮播的jquery插件，它配置
/news/59/easy-slider-jquery-plugin
JQuery-Countdown-倒计时插件
您在一些网站上可能会遇到这种情景，当想下载某个文件的之前，会
/news/60/jquery-count-down-plugin
jquery基础教程-如何用jquery创建一个确认对话框
我们继续来做出我们自定义的浏览器插件。今天我们将要制作一个跨
/news/61/jquery-create-confirm-dialog
jquery基础教程-如何创建一个自动播放的幻灯片
在一个网站上，其中一个迫切要改进的技能，当涉及到幻灯片的时候
/news/64/jquery-make-auto-advancing-slideshow
如何使用jquery+css制作谷歌圣诞涂鸦
还有大半个月就到圣诞节了，在如此盛大的节日里，我想谷歌不会错
/news/67/google-christmas-doodle
使用jquery制作缩略图预览滑块
本次教程我们将为大家展现如何用JQuery插件来创建和使用缩
/news/68/jquery-thumbnails-preview
非凡的效果，jquery菜单也能这么做
今天给大家介绍的jquery插件是在网站上必不 可少的jqu
/news/78/create-a-cool-animated-menu
别以为人人都会用你的网站，jquery网站引导插件
全球每分每秒都有成千上万个新站公众于世，然而能够站得住脚的却
/news/80/jquery-intro-guide
jquery插件-论js遮罩效果的巧妙应用
传统的js遮罩层原理是在页面的最顶端上防止一个div，然而，
/news/81/jquery-overlay-like-effect
JQuery幻灯片之旋转的幻灯片
jquery幻灯片系列我在之前已经介绍了很多了，效果各有特色
/news/94/jquery-css3-slideshow-rotating
jquery悬停切换幻灯片（鼠标移动或点击）
今天我们要介绍的jquery插件是一款十分适合用于图片画廊，
/news/96/jquery-hover-slide-effect
酷站必备，一款十分赞的下拉框效果
一个网站如果一直使用html原生的控件样式，我想在这个Web
/news/97/jquery-custom-dropdown
酷站必备，一款十分赞的下拉框效果（续作）
昨天我发了一款juqery下拉框下拉框 的插件《酷站必备，一
/news/98/jquery-dropdown-width-font-and-pic
增强用户粘性，jquery制作拉出内容的面板
当用户进入你的网站的时候，作为站长肯定想方设法想让用户停留多
/news/99/expand-pannel-width-jquery
jquery插件之迷你舒适的幻灯片画廊
今天我为大家介绍如何创建一个简易而又不失华丽的jquery幻
/news/101/jquery-minimalistic-slideshow-gallary
jQuery制作控制图像展开重叠的滑块
今天为大家介绍的jquery插件的功能是如何使用jquery
/news/102/jquery-expand-stacked-images
jquery图片相册 适用于图片网站 提升用户交互
在本实例当中我们将创建一个能够跟用户互动的交互式
/news/103/jquery-photo-desk
jquery导航菜单之垂直风格导航菜单
jquery导航菜单是我们在建设网站的时候必须用到的模块，因
/news/106/jquery-vertical-menu
结合jQuery和VisualLightBox制作图片查看器
今天我要介绍的jquery插件当中是我们的网
站上常用的图
/news/108/jquery-with-visual-lightbox
jquery实现多功能组合框，小插件，多功能
下拉框的功能常见是用于选择项而已，然而在一些强调功能多样性的
/news/114/jquery-eComboBox-select-box-width-editing
jquery插件之实现苹果风格的CoverScroll的效果
本次介绍的是一款能够实现 Apple CoverFlow 风
/news/116/jquery-apple-style-converscroll
继续苹果风，仿mac os 中的导航菜单
之前介绍了不少有关苹果风格的jquery插件，今天我继续为大
/news/117/css-apple-mac-style-menu
jquery制作精美的评分插件
本实例给大家展示一个简易却又不失气派的jquery评分插件。
/news/118/jquery-rating-system
jquery制作精美的图片画廊，支持拖动图片
得益于CSS3变形的特性，我们可以在网页上使元素做出各种变化
/news/119/jquery-css3-rotatable-images
jquery插件之制作热点选项卡(热点和点击事件示例)
今天给大家介绍的jquery插件是如何使用jquery实现一
/news/120/jquery-hover-click-tab-control
ajax实现无刷新购物车功能
现今电子商务网站盛行，有独立资源的公司都恨不得自己另起炉灶建
/news/121/ajax-shoping-cart
js特效之响应式图片画廊
今天我想为大家介绍一个通过使用 Elastislide 来创
/news/122/js-responsive-image-gallery
jquery幻灯片--轻量级内容滚动插件
今天为大家介绍的js特效是一款明教FlexSlider的轻量
/news/128/jquery-flex-slider
jquery插件之实现传送带拖动效果插件
本jquery插件除了鼠标点击切换图片外，还能通过鼠标进行左
/news/129/jquery-slick-plugin
jquery插件之精美的倒计时特效jQuery Countdown
倒计时功能在很多抢拍网站或网购网站里是十分常用的js特效，为
/news/130/jquery-count-down
jquery相册插件，附带精美的过渡效果和缩略图导航
jquery幻灯片插件在本站中应该也有不少存货了了，然而，人
/news/132/jquery-smart-gallery
jquery插件之精美的自动新闻滚动列表
在很多新闻的网站里，总会有个自动滚动新闻的模块，首先是节省空
/news/133/jquery-vscroller
可拖动的高大上jquery幻灯片
今天我将要创建一个全屏展示图片和内容的表格的jquery插件
/news/135/jquery-draggable-images
jquery常用插件之下拉式登录插件
随着单页网站的流行，网页设计者们不得不将本来设计成几个页面的
/news/136/jquery-login-plugin
jquery插件之炫目易用的幻灯片
jquery幻灯片插件在网站上有很多种，今天我继续为大家介绍
/news/137/jquery-simple-slider
回归平凡，简易平实的jquery幻灯片插件
炫目多彩的jquery幻灯片我相信在我的网站上能找到不少，然
/news/138/jquery-crafty-slide
jquery气泡提示插件grumble.js
jquery提示插件在本网站上也有不少存货了，今天我再为大家
/news/139/jquery-grumble-js
使用jquery制作精美的下拉菜单
在本次教程中我们讲创造一款独一无二的下拉菜单。此jquery
/news/141/jquery-slide-down-box-menu
jquery特效之制作专业的下拉菜单
有一个富有吸引力的导航影响着浏览的用户是否停留长久，接下来的
/news/142/jquery-professional-menu
jquery制作小型婚礼祝福墙，so sweet
本次的作品是从博客园上看到的，博主的作品做的相当有特色，这是
/news/145/jquery-blessing-wall
jquery插件之精美的文字滑动效果
如今想吸引用户长期驻足你的网站的方法不多，要么内容新鲜及时，
/news/146/jquery-sliding-letters
jquery插件之鼠标悬停图片切换效果
今天为大家分享一款图片切换的过渡的效果，当我们使用鼠标在焦点
/news/147/jquery-item-blur
jquery插件分享之旋转的文字特效
今天为大家介绍的是一款能让咱们平时看上去十分普通的文本文字摇
/news/148/jquery-rotate-font
jquery插件之自定义提示插件noty
如今很多形形色色的SNS类的网站，会员的黏性很高，网站会员们
/news/152/jquery-noty-plugins
jquery实用插件之ajax分页插件
网站内容千变万化，种类繁多，但一个屏幕能够显示的内容却是有限
/news/153/jquery-ajax-jpages
JSShare致力于成为前端爱好者分享javascript,jquery,HTML5等前端知识的平台，提供优质的代码，让各位感受到代码之美，分享代码的乐趣。
copyright (C) 2013 powered
联系邮箱：
沪ICP备号-1»»26个Jquery使用小技巧
　　下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。
1. 禁止右键点击
$(document).ready(function(){
$(document).bind(&contextmenu&,function(e){
2. 隐藏搜索文本框文字
Hide when clicked in the search field, the value.(example can be found below in the comment fields)
$(document).ready(function() {
$(&input.text1&).val(&Enter your search text here&);
textFill($('input.text1'));
function textFill(input){ //input focus text function
var originalvalue = input.val();
input.focus( function(){
if( $.trim(input.val()) == originalvalue ){ input.val(''); }
input.blur( function(){
if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
3. 在新窗口中打开链接
XHTML 1.0 Strict doesn&t allow this attribute in the code, so use this to keep the code valid.
$(document).ready(function() {
//Example 1: Every link will open in a new window
$('a[href^=&http://&]').attr(&target&, &_blank&);
//Example 2: Links with the rel=&external& attribute will only open in a new window
$('a[@rel$='external']').click(function(){
this.target = &_blank&;
// how to use
&A&href=&&&rel=external&open&link&/A&
4. 检测浏览器
注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量
$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version &= &1.8& ){
// do something
// Target Safari
if( $.browser.safari ){
// do something
// Target Chrome
if( $.browser.chrome){
// do something
// Target Camino
if( $.browser.camino){
// do something
// Target Opera
if( $.browser.opera){
// do something
// Target IE6 and below
if ($.browser.msie && $.browser.version &= 6 ){
// do something
// Target anything above IE6
if ($.browser.msie && $.browser.version & 6){
// do something
5. 预加载图片
This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.
$(document).ready(function() {
jQuery.preloadImages = function()
for(var i = 0; i&ARGUMENTS.LENGTH; jQuery(?&img { i++)&&).attr(&src&, arguments[i]);
// how to use
$.preloadImages(&image1.jpg&);
6. 页面样式切换
$(document).ready(function() {
$(&a.Styleswitcher&).click(function() {
//swicth the LINK REL attribute with the value in A REL attribute
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
// how to use
// place this in your header
&LINK rel=stylesheet type=text/css href=&default.css&&
// the links
&A class=Styleswitcher href=&#& rel=default.css&Default Theme&/A&
&A class=Styleswitcher href=&#& rel=red.css&Red Theme&/A&
&A class=Styleswitcher href=&#& rel=blue.css&Blue Theme&/A&
7. 列高度相同
如果使用了两个CSS列，使用此种方式可以是两列的高度相同。
$(document).ready(function() {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight & tallest) {
tallest = thisH
group.height(tallest);
// how to use
$(document).ready(function() {
equalHeight($(&.left&));
equalHeight($(&.right&));
8. 动态控制页面字体大小
用户可以改变页面字体大小
$(document).ready(function() {
// Reset the font size(back to default)
var originalFontSize = $('html').css('font-size');
$(&.resetFont&).click(function(){
$('html').css('font-size', originalFontSize);
// Increase the font size(bigger font0
$(&.increaseFont&).click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
// Decrease the font size(smaller font)
$(&.decreaseFont&).click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
9. 返回页面顶部功能
For a smooth(animated) ride back to the top(or any location).
$(document).ready(function() {
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().
$('html,body')
.animate({scrollTop: targetOffset}, 900);
// how to use
// place this where you want to scroll to
&A name=top&&/A&
// the link
&A href=&#top&&go to top&/A&
11. 获得鼠标指针ＸＹ值
Want to know where your mouse cursor is?
$(document).ready(function() {
$().mousemove(function(e){
//display the x and y axis values inside the div with the id XY
$('#XY').html(&X Axis : & + e.pageX + & | Y Axis & + e.pageY);
// how to use
&DIV id=XY&&/DIV&
12. 验证元素是否为空
This will allow you to check if an element is empty.
$(document).ready(function() {
if ($('#id').html()) {
// do something
13. 替换元素
Want to replace a div, or something else?
$(document).ready(function() {
$('#id').replaceWith('
&DIV&I have been replaced&/DIV&
14. jQuery延时加载功能
Want to delay something?
$(document).ready(function() {
window.setTimeout(function() {
// do something
15. 移除单词功能
Want to remove a certain word(s)?
$(document).ready(function() {
var el = $('#id');
el.html(el.html().replace(/word/ig, &&));
16. 验证元素是否存在于jquery对象集合中
Simply test with the .length property if the element exists.
$(document).ready(function() {
if ($('#id').length) {
// do something
17. 使整个DIV可点击
Want to make the complete div clickable?
$(document).ready(function() {
$(&div&).click(function(){
//get the url from href attribute and launch the url
window.location=$(this).find(&a&).attr(&href&);
// how to use
&DIV&&A href=&index.html&&home&/A&&/DIV&
18. ID与Class之间转换.
当改变Window大小时，在ID与Class之间切换
$(document).ready(function() {
function checkWindowSize() {
if ( $(window).width() & 1200 ) {
$('body').addClass('large');
$('body').removeClass('large');
$(window).resize(checkWindowSize);
19. 克隆对象
Clone a div or an other element.
$(document).ready(function() {
var cloned = $('#id').clone();
// how to use
&DIV id=id&&/DIV&
20. 使元素居屏幕中间位置
Center an element in the center of your screen.
$(document).ready(function() {
jQuery.fn.center = function () {
this.css(&position&,&absolute&);
this.css(&top&, ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + &px&);
this.css(&left&, ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + &px&);
$(&#id&).center();
21. 写自己的选择器
Write your own selectors.
$(document).ready(function() {
$.extend($.expr[':'], {
moreThen1000px: function(a) {
return $(a).width() & 1000;
$('.box:moreThen1000px').click(function() {
// creating a simple js alert box
alert('The element that you have clicked is over 1000 pixels wide');
22. 统计元素个数
Count an element.
$(document).ready(function() {
$(&p&).size();
23. 使用自己的 Bullets
Want to use your own bullets instead of using the standard or images bullets?
$(document).ready(function() {
$(&ul&).addClass(&Replaced&);
$(&ul & li&).prepend(&- &);
// how to use
ul.Replaced { list-style : }
24. 引用Google主机上的Jquery类库
Let Google host the jQuery script for you. This can be done in 2 ways.
//Example 1
&SCRIPT src=&/jsapi&&&/SCRIPT&
&SCRIPT type=text/javascript&
google.load(&jquery&, &1.2.6&);
google.setOnLoadCallback(function() {
// do something
&/SCRIPT&&SCRIPT type=text/javascript src=&/ajax/libs/jquery/1.2.6/jquery.min.js&&&/SCRIPT&
// Example 2:(the best and fastest way)
&SCRIPT type=text/javascript src=&/ajax/libs/jquery/1.2.6/jquery.min.js&&&/SCRIPT&
25. 禁用Jquery（动画）效果
Disable all jQuery effects
$(document).ready(function() {
jQuery.fx.off =
26. 与其他Javascript类库冲突解决方案
To avoid conflict other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.
$(document).ready(function() {
var $jq = jQuery.noConflict();
$jq('#id').show();
英文原文：
验证消息：Admin10000
提示：常上QQ空间的朋友可关注，精彩内容不错过。
理智评论文明上网，拒绝恶意谩骂 发表评论 / 共3条评论
登录会员中心}