很大气的滑动门图片特效
- 很大气美观的滑动门图片特效,右侧显示标题,鼠标滑上去左侧的大图片就切换,可为图片增加描述和标题介绍,支持Alt标签和title标签,示例中可能去掉了这些,若需要的话自己再添加上去。本图片的流畅平滑效果要归功于jquery,欢迎学习前端图片特效的参阅代码。
<!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> <title>响应式图片切换jQuery选项卡</title> <style> html,body,div,img,q,dl,dt,dd,ol,ul,li{margin:0;padding:0;} img,a img{border-style:none;border-width:0;} a,a:hover{ text-decoration:none} html {margin:0 auto;} ol,ul,li{list-style: none;}:focus{outline: 0;} body{background-color:#eef9f8; color:#666} a,a:visited{ color:#666} a:hover {color:#009966;} .main{ font-family:宋体; color:#666; width:912px; margin:0 auto} .slider-scroll{margin-top:12px; overflow:hidden;height:421px;} #showArea{ width:664px; float:left;height:419px;border:1px solid #bebebe; border-right:none} #showArea img{ opacity:0; display:none;} #scrollDiv{float:left; width:246px; height:421px; background:url(/jscss/demoimg/201402/slider_side.jpg) 0 0 no-repeat} #scrollDiv ul{ padding:19px 0 0 0} #scrollDiv li{width:220px;height:57px;padding:10px 0 10px 26px; cursor:pointer; font-family:微软雅黑;} #scrollDiv li.on{ background:#003030; position:relative;} #scrollDiv li a{display:block; font-size:16px; height:35px; line-height:35px; color:#fff;} #scrollDiv li span{display:block; color:#66ffff; font-size:14px; height:15px; line-height:15px; } #scrollDiv li span.entity-triangle{ display:none; } #scrollDiv li.on span.entity-triangle{position:absolute; top:31px; left:-6px; display:block; width:6px; height:22px;z-index:99;} </style> <script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $.extend({manualScroll:function(opt,callback){//alert("suc");this.defaults = {objId:"", // 滚动区域idshowArea:"", // 大图显示区域id,如果没有就不显示showWidth:419, // 大图宽度showHeight:664, // 大图高度showTitle: false, // 是否在大图下方显示标题width:300, // 每行的宽度height:100, // div的高度picTimer:0, // 间隔句柄,不需要设置,只是作为标识使用interval:5500};//参数初始化var opts = $.extend(this.defaults,opt);var $objId = opts.objId;var $showArea = opts.showArea;var $showWidth = opts.showWidth;var $showHeight = opts.showHeight;var $showTitle = opts.showTitle;var $width = opts.width;var $height = opts.height;var $titleopacity = opts.titleopacity;var $picTimer = opts.picTimer;var index=0;var $len = $("#"+$objId).find("ul li").length;/*设置显示图片大小*/$("#"+$showArea).find("img").css({"height":$showHeight,"width":$showWidth});/*鼠标移动事件*/$("#"+$objId).find("ul li").hover(function(){index = $(this).index();showimg(index);});/*自动切换*/$(".slider-scroll").hover(function(){clearInterval($picTimer);},function(){$picTimer = setInterval(function() {if(index==$len-1){index=0;}else{index+=1;}$("#"+$objId).find("ul li").removeClass("on");$("#"+$objId).find("ul li").eq(index).addClass("on");$("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"});$("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);},opts.interval); // 自动播放的间隔,单位:毫秒}).trigger("mouseleave");function showimg(index){if(index==$len){index=0;}$("#"+$objId).find("ul li").removeClass("on");$("#"+$objId).find("ul li").eq(index).addClass("on");$("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"});$("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);index+=1;} } }); </script> </head> <body> <script type="text/javascript"> //home 顶部大图切换 $(document).ready(function(){ $.manualScroll({ objId:"scrollDiv", showArea:"showArea", showWidth:664, // 大图宽度 showHeight:419, // 大图高度 showTitle: true, picTimer:0, interval:3000 }); }); </script> <div class="main"><div class="slider-scroll f-c"><div id="showArea"><a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall1.jpg" width="664px" height="419px"></a><a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall4.jpg" width="664px" height="419px"></a><a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall6.jpg" width="664px" height="419px"></a><a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall7.jpg" width="664px" height="419px"></a><a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall9.jpg" width="664px" height="419px"></a></div><div id="scrollDiv"><ul><li class="on"><a href="/" target="_blank">斜弱视专家援疆<!--12个字以内--><span>权威治疗疑难斜弱视<!--14个字以内--></span></a><span class="entity-triangle"></span></li><li ><a href="/" target="_blank">IntraLase飞秒激光治近视<!--12个字以内--><span>全程无刀安全治近视首选<!--14个字以内--></span></a><span class="entity-triangle"></span></li><li ><a href="/" target="_blank">青少年近视防控<!--12个字以内--><span>非手术治近视<!--14个字以内--></span></a><span class="entity-triangle"></span></li><li ><a href="/" target="_blank">白内障防治<!--12个字以内--><span>爱让父母看得见<!--14个字以内--></span></a><span class="entity-triangle"></span></li><li ><a href="/" target="_blank">ICL人工晶体植入术<!--12个字以内--><span>无损角膜之高端近视治疗<!--14个字以内--></span></a><span class="entity-triangle"></span></li></ul></div></div> </div> <div style="text-align:center;clear:both"> </div> </body> </html>
很大气的滑动门图片特效相关推荐
- 分享8款简单大气的jQuery/CSS3图片特效
自从jQuery问世以后,网页上就流行很多漂亮的图片效果,像淡入淡出或者焦点图等,但是,现在jQuery结合CSS3,我们可以打造更美观更实用的图片特效.下面分享8款简单而又大气的jQuery/CSS ...
- 【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )
文章目录 一.滑动门技术 1.滑动门技术借助 CSS 精灵技术实现 2.外部标签设置左半部分背景图片 3.内部标签设置右半部分背景图片 4.鼠标经过时更换背景 二.完整代码示例 一.滑动门技术 1.滑 ...
- CSS——CSS滑动门及其应用(制作微信导航栏) ※
滑动门 先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一 ...
- 绝对经典的滑动门特效代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...
- 很不错的JS+CSS滑动门_网页代码站(www.webdm.cn)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 很不错的JS+CSS滑动门
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
- 很棒带阴影的JS+CSS滑动门菜单代码
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
- 一款功能综合的CSS滑动门特效
一个功能综合的CSS滑动门特效代码,在滑动门里包含列表.包含图文混排.包含文字滚动,其中任意一个都是我们常用的,综合运用这些功能才能做出更炫丽.符合标准的网页来. 注:本特效的代码没有经过优化,仅为了 ...
- jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效
原文:jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效 源代码下载地址:http://www.zuidaima.com/share/1607128309009408.htm
最新文章
- Python从入门到精通 - 入门篇 (上)
- ddos攻击python_Python基于http的ddos攻击代码
- 启明云端分享|sigmastar SSW101B WiFi 非信令测试说明
- c# 中Stopwatch 类的运用
- 【java】Java异常处理总结
- Android客户端打包方案分享
- 使用mysql_fetch_array()获取当前行数据
- mysql下载了解压版怎么_教你安装Mysql(解压版/非安装包)图文教程
- java语言静态分析工具_PMD 6.16.0 发布,跨语言静态代码自动分析工具
- 使用CLion的时候,对于cmake的使用
- 企业实战(Jenkins+GitLab+SonarQube)_08_jenkins安装和第一个Java项目构建
- drcom linux怎么运行,linux下使用drcom登录认证
- 总结vue几种页面刷新方法
- tensorflow——deeplabv3+训练cityscapes数据集(未完待续)
- qt中socket通信流程图_Qt学习 之 Socket通信
- 如何阅读Java源码?
- 美团2020校招测试方向笔试题
- jquery colorbox图片弹出效果制作
- 应付一天(今天太累)附新东方考研5500词音频
- 软件开发的12大定律,你是否使用了呢