您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

  • jQuery旋转预览画廊效果

    jQuery旋转预览画廊效果

    jQuery旋转预览画廊效果
    20150913105025
    HTML代码结构

    <div class="wrapper"> <div class="gallery"> <ul class="reset"> <li><img src="img/img1.jpg" alt="" /></li> <li><img src="img/img2.jpg" alt="" /></li> <li><img src="img/img3.jpg" alt="" /></li> <li><img src="img/img4.jpg" alt="" /></li> <li><img src="img/img5.jpg" alt="" /></li> <li><img src="img/img6.jpg" alt="" /></li> <li><img src="img/img7.jpg" alt="" /></li> <li><img src="img/img8.jpg" alt="" /></li> </ul> </div> </div>

    导入js代码文件

    <script src="js/jquery.js" type="text/javascript"></script><script src="js/raphael.js" type="text/javascript"></script><script src="js/init.js" type="text/javascript"></script>

    下载地址
    预览地址

  • jquery垂直下拉多级菜单效果

    jquery垂直下拉多级菜单效果

    jquery垂直下拉多级菜单效果
    20150927104217
    导入js代码

    <script src="jquery.min.js" type="text/javascript"></script><script type="text/javascript" src="menu_min.js"></script><script type="text/javascript">$(document).ready(function (){ $(".menu ul li").menu(); }); </script> 

    下载地址
    预览地址

  • Tab标签选项卡360度内容翻转jquery特效

    Tab标签选项卡360度内容翻转jquery特效

    Tab标签选项卡360度内容翻转jquery特效
    20150927103604
    引入js代码

    <script src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.quickflip.js" ></script><script type="text/javascript" > $('document').ready(function(){ $('#flip-container').quickFlip(); $('#flip-navigation li a').each(function(){ $(this).click(function(){ $('#flip-navigation li').each(function(){ $(this).removeClass('selected'); }); $(this).parent().addClass('selected'); var flipid=$(this).attr('id').substr(4); $('#flip-container').quickFlipper({ }, flipid, 1); return false; }); }); });</script>

    下载地址
    预览地址

  • Zoomhover简易的jQuery放大镜效果

    Zoomhover简易的jQuery放大镜效果

    Zoomhover简易的jQuery放大镜效果
    20150927101634
    引入js代码

    <script type="text/javascript" src="js/jquery.min.js"></script><script> /* imgbox 当前图片区域 hoverbox 鼠标移入区域 l 当前图片左距离 t 当前图片上距离 x 鼠标距离X轴 y 鼠标距离Y轴 h_w 鼠标移入图片块宽度 h_h 鼠标移入图片块高度 showbox 展示大图区域*/ function Zoom(imgbox, hoverbox, l, t, x, y, h_w, h_h, showbox) { var moveX = x - l - (h_w / 2); //鼠标区域距离 var moveY = y - t - (h_h / 2); //鼠标区域距离 if (moveX < 0) { moveX = 0 } if (moveY < 0) { moveY = 0 } if (moveX > imgbox.width() - h_w) { moveX = imgbox.width() - h_w } if (moveY > imgbox.height() - h_h) { moveY = imgbox.height() - h_h } //判断鼠标使其不跑出图片框 var zoomX = showbox.width() / imgbox.width() //求图片比例 var zoomY = showbox.height() / imgbox.height() showbox.css({ left: -(moveX * zoomX), top: -(moveY * zoomY) }) hoverbox.css({ left: moveX, top: moveY }) //确定位置 } function Zoomhover(imgbox, hoverbox, showbox) { var l = imgbox.offset().left; var t = imgbox.offset().top; var w = hoverbox.width(); var h = hoverbox.height(); var time; $(".probox img,.hoverbox").mouseover(function(e) { var x = e.pageX; var y = e.pageY; $(".hoverbox,.showbox").show(); hoverbox.css("opacity", "0.3") time = setTimeout(function() { Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox) }, 1) }).mousemove(function(e) { var x = e.pageX; var y = e.pageY; time = setTimeout(function() { Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox) }, 1) }).mouseout(function() { showbox.parent().hide() hoverbox.hide(); }) } $(function() { Zoomhover($(".probox img"), $(".hoverbox"), $(".showbox img")); })</script>

    下载地址
    预览地址

  • jQuery背景图片墙聚光灯效果

    jQuery背景图片墙聚光灯效果

    jQuery背景图片墙聚光灯效果
    20150927100722
    导入js代码

    <script type="text/javascript" charset="utf-8" src='js/jquery.js'></script><script type="text/javascript" charset="utf-8"> $(window).load(function() { var spotlight = { // the opacity of the "transparent" images - change it if you like opacity: 0.2, /*the vars bellow are for width and height of the images so we can make the &lt;li&gt; same size */ imgWidth: $('.spotlightWrapper ul li').find('img').width(), imgHeight: $('.spotlightWrapper ul li').find('img').height() }; //set the width and height of the list items same as the images $('.spotlightWrapper ul li').css({ 'width': spotlight.imgWidth, 'height': spotlight.imgHeight }); //when mouse over the list item... $('.spotlightWrapper ul li').hover(function() { //...find the image inside of it and add active class to it and change opacity to 1 (no transparency) $(this).find('img').addClass('active').css({ 'opacity': 1 }); //get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array $(this).siblings('li').find('img').css({ 'opacity': spotlight.opacity }); //when mouse leave... }, function() { //... find the image inside of the list item we just left and remove the active class $(this).find('img').removeClass('active'); }); //when mouse leaves the unordered list... $('.spotlightWrapper ul').bind('mouseleave', function() { //find the images and change the opacity to 1 (fully visible) $(this).find('img').css('opacity', 1); }); });</script>

    下载地址
    预览地址

  • 可调整导航大小的jQuery特效

    可调整导航大小的jQuery特效

    可调整导航大小的jQuery特效
    20150922230949
    引入js代码

    <script type="text/javascript" src="jquery-1.3.2.js"></script><script type="text/javascript"> $(function() { changeWidth(500); $('#buttons input').click(function() { changeWidth($(this).val()); }); function changeWidth(menuWidth) { var menuItems = $('#menu li').size(); var itemWidth = (menuWidth / menuItems) - 2; $('#menu').css({ 'width': menuWidth + 'px' }); $('#menu a').css({ 'width': itemWidth + 'px' }); } });</script>

    下载地址
    预览地址

  • 模仿flash翻转效果的jquery导航菜单代码

    模仿flash翻转效果的jquery导航菜单代码

    模仿flash翻转效果的jquery导航菜单代码
    20150927093730
    引入css js代码文件

    <link href="css/flipmenu.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><script type="text/javascript" src="js/flipmenu-min.js"></script><script type="text/javascript"> $(document).ready(function() { var menu1 = new Flipmenu("flip_menu1"); var menu2 = new Flipmenu("flip_menu2"); });</script><style type="text/css"> h1 { font-family: arial; font-size: 14pt; color: #318DF2; margin-top: 35px; } #wrap { margin : 0px auto; width : 200px; }</style>

    下载地址
    预览地址

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!