您的位置:

首页 >

腾博会官方网 >

完美JQuery图片切换效果的简单实现 >

完美JQuery图片切换效果的简单实现

2016-07-22 11:25:17

分类:腾博会官方网

效果如下:css:body { font-family:"Microsoft Yahei"; }body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;} img{vertical-align: top;}/***大图切换***/.scroll_view{margin: 0px auto;overflow:hidden;position: relative;}.photo_view li{position:absolute;width: 100%;}.photo_view li em,.photo_view li h3{position: absolute;bottom: 0px;z-index: 1;height: 35px;line-height: 35px;width: 100%;left: 0px;}.photo_view li em{z-index: 1;background:rgba(0,0,0,0.5);filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#50000000',endColorstr = '#50000000');_background:#000;}.photo_view li h3{z-index: 2;text-indent: 1em;font-weight: normal;}.photo_view li h3 a{color:#fff;}.photo_view li h3 a:hover{color:#f60;}.small_photo{position: absolute;bottom: 40px;right: 10px;cursor: pointer;z-index: 4;}.small_photo li {float: left;padding-right: 10px;}.small_photo li img{width: 80px;height: 35px;border: solid 2px #ccc;border-radius: 2px;}.small_photo li.active img{border: solid 2px #f60;}html:<!-- start:大图切换 --><div class="scroll_view"> <ul class="photo_view"> <li><img src="images/ad1.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果1</a></h3></li> <li><img src="images/ad2.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果2</a></h3></li> <li><img src="images/ad3.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果3</a></h3></li> <li><img src="images/ad4.jpg" alt="" class="" /><em></em><h3><a href="javascript:void(0);">图片效果4</a></h3></li> </ul> <ul class="small_photo"></ul></div><!-- End:大图切换 -->js:$.fn.extend({ imgScroll:function(options){ var def={phtot_parent:$(".scroll_view"),photo_view:$(".photo_view"),small_photo:$(".small_photo"),speed:800,isauto:true,width:800,height:349}, opt=$.extend({},def,options), $photo_view=opt.photo_view, $small_photo=opt.small_photo, speed=opt.speed, isauto=opt.isauto, index=0, _length=$photo_view.find("li").length, strTime=null; opt.phtot_parent.css({width:opt.width,height:opt.height}); $photo_view.find("li:not(:first)").hide()//.find("img").hide(); $photo_view.find("li").each(function(i){ $small_photo.append('<li><img src="'+$(this).find("img").attr("src")+'" alt="" class="" /></li>'); }) $small_photo.find("li:first").addClass("active"); //小图鼠标动作 $small_photo.find("li").bind("mouseenter",function(){ clearInterval(strTime); if(index!=$(this).index()){ index=$(this).index(); animate(index) } }).bind("mouseleave",function(){ if(isauto){ start(); } }); //大图悬停动作 $photo_view.find("li").bind("mouseenter",function(){ clearInterval(strTime); }).bind("mouseleave",function(){ if(isauto){ start(); } }); //自动播放 if(isauto){ start(); } //启动自动播放 function start(){ strTime=setInterval(function(){ index >= _length-1 ? index=0 : index++; animate(index); },speed); } //动画效果 function animate(_index){//console.log(_index) $small_photo.find("li").eq(_index).addClass('active').siblings().removeClass("active");//改变小图导航样式 $photo_view.find("li").eq(_index).css("z-index",1).siblings().css("z-index",0);//控制absolute的层级 $photo_view.find("li").eq(_index).show().find("img").css({"opacity": 0}); //装大图的opacity设置为0 $photo_view.find("li").eq(_index).find("img").animate({opacity:1},300,function(){ $(this).removeAttr("style");//动画之后删除opacity $photo_view.find("li").eq(_index).show().siblings().hide();//显示大图 });//展示当前显示动画 } }});<script type="text/javascript"> $(function(){$("scroll_view").imgScroll({photo_view:$(".photo_view"),small_photo:$(".small_photo"),speed:3000,isauto:true}); })</script>以上这篇完美JQuery图片切换效果的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

演示地址:http://runjs.cn/detail/yjpvqhalhtml代码<html> <head> <meta charset="utf-8"/> <title>小飞龙的跳球</title> </head> <body onload="init()"> <canvas id="game" width="400" height="400" style="border:1px solid #c3c3c3"> 你的游览器不支持html5的画布元素,请升级到IE9+或使用firefox、chrome这类高级的智能游览器! </canvas> <script> var canvas = document.getElementById('game'); var ctx = canvas.getContext('2d'); var grad; //盒子的起始位置和大小以及球的半径 var box = {x:20,y:20,w:350,h:350,r:20}; //球的中心位置和偏移位置 var inbox = {//box内的限制范围 bx:(box.w+box.x-box.r), by:(box.h+box.y-box.r), ix:box.x+(box.r*2), iy:box.y+(box.r*2) }; //球的初始位置和变化位置 var ball = {x:50,y:50,vx:4,vy:8}; var img = new Image(); img.src = 'images/qiuqiu.png'; var hue = [[255,0,0],[255,255,0],[0,255,0],[0,255,255],[0,0,255],[255,0,0]]; function init(){ grad = ctx.createLinearGradient(box.x,box.y,box.w,box.h); for(var i=0;i<hue.length;i++){ var color = 'rgb('+hue[i][0]+','+hue[i][1]+','+hue[i][2]+')'; grad.addColorStop(i/hue.length,color); } ctx.lineWidth = box.r; ctx.fillStyle = 'rgb(200,0,50)'; ctx.fillStyle = grad; moveBall(); setInterval(moveBall,50); } //碰撞检测并重新确定球的位置 function moveBallEndCheck(){ var nx = ball.x + ball.vx; var ny = ball.y + ball.vy; if(nx > inbox.bx){//当前x大于上边框边界 ball.vx = -ball.vx;//球的变化x坐标当前当前变化x坐标的负数 nx = inbox.bx;//当前位置为上边框的位置 } if(nx < inbox.ix){//当前位置小于下边框 nx = inbox.ix;//当前位置为下边框的x ball.vx = -ball.vx;//球的变化x坐标翻转取负 } if(ny > inbox.by){ ny = inbox.by; ball.vy = -ball.vy; } if(ny < inbox.iy){ ny = inbox.iy; ball.vy = -ball.vy; } ball.x = nx; ball.y = ny; } function moveBall(){ ctx.clearRect(box.x,box.y,box.w,box.h); moveBallEndCheck(); ctx.beginPath(); //console.log(ball.x+"\t"+ball.y+"\t"+ball.vx+"\t"+ball.vy+"\t"+(ball.x-box.r)+"\t"+(ball.y-box.r)); ctx.drawImage(img,(ball.x-box.r),(ball.y-box.r)); ctx.fillRect(box.x,box.y,box.r,box.h); ctx.fillRect((box.x+box.w-box.r),box.y,box.r,box.h); ctx.fillRect(box.x,box.y,box.w,box.r); ctx.fillRect(box.x,(box.y+box.h-box.r),box.w,box.r); ctx.closePath(); ctx.fill(); } </script> </body></html>演示图片以上所述就是本文的全部代码,希望大家能够喜欢。

本文实例讲述了jQuery使用animate创建动画用法。分享给大家供大家参考。具体如下:animate的用法:animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )用于创建自定义动画的函数。实例运行效果截图如下:具体代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>animate</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").toggle(function(){ $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow'); },function(){ $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow'); });});</script> </head> <body> <a href="#">text</a> <div class="stuff">animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )用于创建自定义动画的函数。</div></body> </html>希望本文所述对大家的jquery程序设计有所帮助。

本文实例讲述了jQuery中prepend()方法用法。分享给大家供大家参考。具体分析如下:此方法可向所有匹配元素的内部的前面追加HTML内容。特别说明:此方法是追加内容,也就是原来的内容还在。HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染。文本内容是先将内容中的html预定义字符转换成html字符实体,这样html标签就不会被渲染。语法结构:复制代码 代码如下:$(selector).prepend(content)实例代码: 实例一:复制代码 代码如下:<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.jb51.net/" /><title>脚本之家</title><style type="text/css">div {  height:150px;  width:150px;  background-color:green;  margin-top:10px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(document).ready(function(){   $("div").prepend("<b>  好好学习</b>"); }) </script></head><body><div>原来内容</div></body></html>[/size][size=2]在原来div内容的前面追加内容。实例二:复制代码 代码如下:<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.jb51.net/" /><title>脚本之家</title><style type="text/css">div {  height:150px;  width:150px;  background-color:green;  margin-top:10px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(document).ready(function(){    $("button").click(function(){     $(".html").prepend("<b>好好学习</b>");     $(".text").text("<b>好好学习</b>");       }) }) </script></head><body><div class="html"></div><div class="text"></div><button>点击查看效果</button></body></html>通过此实例大家可以观察一下html内容和文本内容的区别。希望本文所述对大家的jQuery程序设计有所帮助。

本文将讨论使 JavaScript 函数更有表现力的两个特性:Rest 参数和参数默认值。Rest 参数通常,我们需要创建一个可变参数的函数,可变参数是指函数可以接受任意数量的参数。例如,String.prototype.concat 可以接受任何数量的字符串作为参数。使用 Rest 参数,ES6 为我们提供一种新的方式来创建可变参数的函数。我们来实现一个示例函数 containsAll,用于检查一个字符串中是否包含某些子字符串。例如,containsAll("banana", "b", "nan") 将返回true,containsAll("banana", "c", "nan") 将返回 false。下面是传统的实现方式:function containsAll(haystack) { for (var i = 1; i < arguments.length; i++) { var needle = arguments[i]; if (haystack.indexOf(needle) === -1) { return false; } } return true;} function containsAll(haystack) { for (var i = 1; i < arguments.length; i++) { var needle = arguments[i]; if (haystack.indexOf(needle) === -1) { return false; } } return true;}该实现用到了 arguments 对象,该对象是一个类数组对象,包含函数被调用时的实参列表。这段代码正是我们想要的,但其可读性却不是最优的。函数只有一个形参 haystack,所以不可能一看就知道该函数需要多个参数,并且在遍历 arguments 时,需要特别注意遍历的开始索引为1 ,而不是常见的 0,因为 arguments[0] 就是函数定义时的形参 haystack。如果我们想在 haystack 参数之前或之后添加一些参数,我们不得不更新内部的循环。Rest 参数解决了这些问题,下面是 使用 Rest 参数的实现方式:function containsAll(haystack, ...needles) { for (var needle of needles) { if (haystack.indexOf(needle) === -1) { return false; } } return true;} function containsAll(haystack, ...needles) { for (var needle of needles) { if (haystack.indexOf(needle) === -1) { return false; } } return true;}以上两个实现都满足了我们的需求,但后者包含一个特殊的 ...needles 语法。我们来看看调用containsAll("banana", "b", "nan") 时的细节,参数 haystack 和以往一样,将用函数的第一个实参填充,值为 "banana",needles 前面的省略号表示它是一个 Rest 参数,剩余的所有实参将被放入一个数组中,并将该数组赋给 needles 遍量。在这个调用中,needles 的值为 ["b", "nan"]。然后,就是正常的函数执行了。只能将函数的最后一个函数作为 Rest 参数,在函数被调用时,Rest 参数之前的参数都将被正常填充,之外的参数将被放入一个数组中,并将该数组作为 Rest 参数的值,如果没有更多的参数,那么 Rest 参数的值为一个空数组 [],Rest 参数的值永远都不会是 undefined。参数的默认值通常,调用一个函数时,不需要调用者传递所有可能的参数,那些没有传递的参数都需要一个合理的默认值。JavaScript 对那些没有传递的参数都有一个固定的默认值 undefined。在 ES6 中,引入了一种新方法来指定任意参数的默认值。看下面例子:function animalSentence(animals2="tigers", animals3="bears") { return `Lions and ${animals2} and ${animals3}! Oh my!`;} function animalSentence(animals2="tigers", animals3="bears") { return `Lions and ${animals2} and ${animals3}! Oh my!`;}在每个参数的 = 后面是一个表达式,指定了参数未传递时的默认值。所以,animalSentence() 返回 "Lions and tigers and bears! Oh my!", animalSentence("elephants") 返回"Lions and elephants and bears! Oh my!", animalSentence("elephants", "whales") 返回 "Lions and elephants and whales! Oh my!"。参数默认值需要注意的几个细节:    与 Python 不一样的是,参数默认值的表达式是在函数调用时从左到右计算的,这意味着表达式可以使用前面已经被填充的参数。例如,我们可以将上面的函数变得更有趣一点:function animalSentenceFancy(animals2="tigers", animals3=(animals2 == "bears") ? "sealions" : "bears"){ return `Lions and ${animals2} and ${animals3}! Oh my!`;} function animalSentenceFancy(animals2="tigers", animals3=(animals2 == "bears") ? "sealions" : "bears"){ return `Lions and ${animals2} and ${animals3}! Oh my!`;}那么,animalSentenceFancy("bears") 将返回 "Lions and bears and sealions. Oh my!"。    传递 undefined 等同于没有传递该参数。因此,animalSentence(undefined, "unicorns") 将返回 "Lions and tigers and unicorns! Oh my!"。    如果没有为一个参数指定默认值,那么该参数的默认值为 undefined,所以function myFunc(a=42, b) {...} function myFunc(a=42, b) {...}等同于function myFunc(a=42, b=undefined) {...} function myFunc(a=42, b=undefined) {...}抛弃 arguments通过 Rest 参数和参数的默认值,我们可以完全抛弃 arguments 对象,使我们的代码可读性更高。此外,arguments 对象也加深了优化 JavaScript 的难题。希望以上两个新特性可以完全取代 arguments。作为第一步,在使用 Rest 参数或参数的默认值时,请避免使用 arguments 对象,假如 arguments 对象还不会立即被移除,或者永远不会,那么也最好是避免在使用 Rest 参数或参数默认值时使用 arguments 对象。兼容性Firefox 15 以上的版本已经支持这两个新特性。然而,除此之外,还没有其他任何浏览器支持。最近,V8 的实验环境添加了对 Rest 参数的支持,而参数默认值还有一个 issue,JSC 也对 Rest 参数和参数默认值提了一些 issue。Babel 和 Traceur 这两个编译器都已经支持了参数默认值,所以你可以大胆使用。结论尽管从技术层面上看,这两个新特性在并没有给函数引入新的行为,但它们可以使一些函数的声明更具表现力和可读性。

焦点访谈

最新最热的文章

更多 >

COPYRIGHT (©) 2017 Copyright ©2017 腾博会官网 网站地图

联系我们

827570882

扫描二维码分享到微信