精华内容
下载资源
问答
  • 今天给客户制作网站里面加个效果,当鼠标在列表图片之外时,标题不显示,当鼠标悬浮在图片之上时,标题从底部弹出。 效果图如下: 鼠标悬浮前: 鼠标悬浮后: html代码如下: <ul class="e3"> ...

    今天给客户制作的网站里面加个效果,当鼠标在列表图片之外时,标题不显示,当鼠标悬浮在图片之上时,标题从底部弹出。

    效果图如下:

    鼠标悬浮前:

    鼠标悬浮后:

     

    html代码如下:

    <ul class="e3">
    	<li>
            <a href="#">
                <img src="./1_131031084533_1.jpg" border="0" width="824" height="94" alt="长城外景基地">
                <span class="title" style="display: none; ">
                    <font class="font1">SHOWCASE TIME<br>长城外景基地</font>
                </span>
            </a>
        </li>
    	<li>
        	<a href="#">
            	<img src="./1_131031084327_1.jpg" border="0" width="824" height="94" alt="白鹭岛">
                <span class="title" style="display: none; ">
                	<font class="font1">SHOWCASE TIME<br>白鹭岛</font>
                </span>
           	</a>
        </li>
    </ul>
    

      

    jquery代码如下:

    <script type="text/javascript">
    $(document).ready(function(){
      $('.e3 li').mouseover(function(){
      $(this).find('.title').stop(true,true).slideDown();//you can give it a speed
      });
      $('.e3 li').mouseleave(function(){
      $(this).find('.title').stop(true,true).slideUp();
      });
      
      
    });
    </script>
    

     

    里面在slideDown和slideUp前面加 stop(true,true) 因为事件的执行有一定延迟,当快速进行把鼠标在图片上悬浮和取消悬浮的操作时,一旦停止下来,事件却没有执行完毕。加后明显改善效果。

    转载于:https://www.cnblogs.com/shanmao/p/3459833.html

    展开全文
  • jQuery UI Dialog是jQuery UI的弹出对话框组件,使用它可以创建各种美观的弹出对话框;它可以设置对话框的标题、内容,并且使对话框可以拖动、调整大小、及关闭;平常主要用来替代浏览嚣自带alert、confirm、open...
  • 设置了五个参数title、 content、width、height、cssName,它们分别定义了层标题、层内内容、层宽、层高、层内容样式名。层内内容又设置了url、 text、id、iframe四种加载方式,通过ajax以get或post加载目标url...
  • 这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用。...
  • "jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果,可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
  • 该特效“不但可以让你 title 提示效果变得美观,而且可以显示你将要点击链接 ...jQuery代码,另存为JS或者整合: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 jQuery(docum

    该特效“不但可以让你的 title 提示效果变得美观,而且可以显示出你将要点击的链接的 url,让用户知道自己将要去哪里”,能不能明显提升了用户感受得用户说了算,但我可以肯定的是这绝对能吸引用户的眼球!

    jQuery代码,另存为JS或者整合:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    jQuery(document).ready(function($){
     
    $("a").mouseover(function(e){
    	this.myTitle = this.title;
    	this.myHref = this.href;
    	this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
    	this.title = "";
    	var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
    	$('body').append(tooltip);
    	$('#tooltip').css({"opacity":"0.8","top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"}).show('fast');
    }).mouseout(function(){this.title = this.myTitle;$('#tooltip').remove();
    }).mousemove(function(e){$('#tooltip').css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});
    });
     
    });

    CSS美化代码:

    #tooltip {position:absolute;z-index:1000;max-width:250px;word-wrap:break-word;background:#000;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
    #tooltip p {color:#fff;font:12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif;}
    #tooltip p em {display:block;margin-top:3px;color:#f60;font-style:normal;}

    最后,别忘了载入jQuery库!

    展开全文
  • jquery实现网页右下角弹出窗口,简单易懂,代码清楚有注释。解压密码在new1990s.taobao.com的标题名称。
  • JQUERY弹出模式DIV

    千次阅读 2013-04-11 09:47:03
    弹出DIV是采用JQUERY+CSS联合控制JQUERY弹出窗口,CSS控制层显示和效果 页面代码: ; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here 标题位置 弹出内容 <di

    弹出DIV是采用JQUERY+CSS联合控制的,JQUERY弹出窗口,CSS控制层的显示和效果

    页面代码:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="script/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="script/pop.js"></script>
    <link type='text/css' rel='Stylesheet' href='style/pop.css' />
    <title>Insert title here</title>
    </head>
    <body>
    
    	<div id='pop-div' style="width: 300px" class="pop-box">
    		<h4 class="pop-boxh4">标题位置</h4>
    		<div class="pop-box-body">
    			<p>弹出内容</p>
    		</div>
    		<div id='buttonPanel' style="text-align: right"
    			style="text-align:right">
    			<input type="button" value="Close" id="btn1"
    				οnclick="hideDiv('pop-div');" />
    		</div>
    	</div>
    	<input type="button" value="选择" οnclick="popupDiv('pop-div')"
    		style="cursor: pointer;">
    </body>
    </html>

    JS代码

    function popupDiv(div_id) {
    	// 获取传入的DIV
    	var $div_obj = $("#" + div_id);
    	// 计算机屏幕高度
    	var windowWidth = $(window).width();
    	// 计算机屏幕长度
    	var windowHeight = $(window).height();
    	// 取得传入DIV的高度
    	var popupHeight = $div_obj.height();
    	// 取得传入DIV的长度
    	var popupWidth = $div_obj.width();
    	// // 添加并显示遮罩层
    	$("<div id='bg'></div>").width(windowWidth * 0.99)
    			.height(windowHeight * 0.99).click(function() {
    				hideDiv(div_id);
    			}).appendTo("body").fadeIn(200);
    	// 显示弹出的DIV
    	$div_obj.css({
    		"position" : "absloute"
    	}).animate({
    		left : windowWidth / 2 - popupWidth / 2,
    		top : windowHeight / 2 - popupHeight / 2,
    		opacity : "show"
    	}, "slow");
    	
    }
    /*隐藏弹出DIV*/
    function hideDiv(div_id) {
    	$("#bg").remove();
    	$("#" + div_id).animate({
    		left : 0,
    		top : 0,
    		opacity : "hide"
    	}, "slow");
    }
    

    CSS代码

    @CHARSET "UTF-8";
    .pop-box-body {
    	clear: both;
    	margin: 4px;
    	padding: 2px;
    }
    
    .pop-boxh4{  
    color:#FFF;  
    cursor:default;  
    height:18px;  
    font-size:14px;  
    font-weight:bold;  
    text-align:left;  
    padding-left:8px;  
    padding-top:4px;  
    padding-bottom:2px;  
    background:blue;
    }
    
    .pop-box {
    	/*弹出窗口后,弹出的DIV采用此CSS,保证置于最上层
    	  z-index控制Z轴的坐标,数值越大,离用户越近
    	*/
    	z-index: 9999999; /*这个数值要足够大,才能够显示在最上层*/
    	margin-bottom: 3px;
    	display: none;
    	position: absolute;
    	background: gray;
    	border: solid1px #6e8bde;
    }
    
    #bg {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	top: 0;
    	left: 0;
    	/*弹出窗口后,添加遮罩层,采用此CSS,将该层置于弹出DIV和页面层之间
    	  z-index控制Z轴的坐标,数值越大,离用户越近
    	*/
    	z-index: 5;  
    	background: white;
    }


    工程代码:http://download.csdn.net/detail/shanhuhau/5245136


    展开全文
  • Jquery在元素处弹出带动画

    千次阅读 2015-11-10 10:01:33
    Jquery在某个元素位置处弹出带动画了层。 本案例中鼠标停留在button上,在button上方或者下方弹出带动画层。获取某个元素在页面中位置。 注意:在没有滚动条时候,这里获取位置正确,有滚动时,则需要获取...

    Jquery在某个元素位置处弹出带动画了层。

    本案例中鼠标停留在button上,在button上方或者下方弹出带动画的层。获取某个元素在页面中的位置。

    注意:在没有滚动条的时候,这里获取位置正确的,有滚动时,则需要获取滚动条的偏移量。

    代码如下:

    <!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>无标题页</title>
        <style type="text/css">
            .fixDiv{background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 200px; height: 100px;}
        </style>    
        <script type="text/javascript" language="javascript" src="JS/jquery-1.3.2-vsdoc2.js"></script>
        <script type="text/javascript" language="javascript">
            $(document).ready(function () {
                //动画速度
                var speed = 700;
    
                $("#btnShow").mouseover(function (event) {
                    //取消事件冒泡
                    event.stopPropagation();
                    //设置弹出层位置
                    var offset = $(event.target).offset();
                    $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
                    //切换弹出层的显示状态
                    $("#divPop").toggle(speed);
                    $("#divPop").html("在按纽<font color=\"red\">下</font>方弹出层");
                });
    
                $("#btnUpShow").mouseover(function (event) {
                    var w = $(this).offset().left, h = $(this).offset().top, dh = $("#divPop").height();
                    $("#divPop").css({ top: h - dh + "px", left: w });
                    $("#divPop").toggle(speed);
                    $("#divPop").html("在按纽<font color=\"blue\">上</font>方弹出层");
                });
            });
        </script>
    </head>
    <body>  
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <input type="button" id="btnShow" value="弹出层" /><input type="button" id="btnUpShow" value="弹出层" style="float:left; margin-left:300px;" />
        <div id="divPop" class="fixDiv"></div>
    </body>
    </html>
    


    运行效果图:

                                                                   

     

    展开全文
  • js代码 [removed][removed] [removed][removed] [removed][removed] ...'title' : '', //标题 ...'bodyScroll' : false, //是否关闭body...这是一款基于jQuery兼容电脑手机端轻量级弹层组件代码,alert.js弹出层插件。
  • 原理很简单,通过JS动态构建... 代码如下: <!– 背景遮盖层 –> ”dialog-overlay”></div> <!– 对话框 –> ”dialog”> ”bar”> ”title”>标题</span> [关闭]</a> </div> ”content”>内容部分</div> </d
  • 本文实例为大家分享了jQuery实现弹出对话框具体实现代码,供大家参考,具体内容如下 首先,这里引用jquery-1.4.4.min.js和jquery.XYTipsWindow.min.2.8.js这两个js,还有一个jquery.XYTipsWindow.2.8.css话不多...
  • jQuery 仿QQ右下角弹出消息提示,显示一个300x200消息,显示一个fadeIn动画消息,显示一个show动画消息,显示一个show动画消息,不含html,显示定义内容和标题消息,一秒钟关闭消息。  支持鼠标over时不关闭消息...
  • 使用jQuery实现DIV弹出效果

    万次阅读 2009-06-03 11:23:00
    现在很多网站都流行这种弹出对话框或是信息显示框,很想将这个流行元素加入到自己项目中。使用jQuery可以不费大力气实现这种效果。将其记录到我Blog中,与业界朋友们起分享。 先上个效果图,可以点击Close...
  • jquery 弹出层插件

    2011-04-19 10:48:11
    本插件图片和css和有些js代码来源于网上,如果有侵权,请联系本人,马上撤掉,目前不适用于商业,希望大家帮忙测试测试,找找BUG,谢谢。   本插件目前具有如下功能: 1、支持拖拉 2、支持多窗口 3、支持有无...
  • js代码 [removed][removed] [removed][removed] [removed][removed] ...'title' : '', //标题 ...'bodyScroll' : false, //是否关闭... 这是一款基于jQuery兼容电脑手机端轻量级弹层组件代码,alert.js弹出层插件。
  • 4.1、手动创建实例 代码如下: [removed] $(function() { $(“#a1”).click(function() { //实例化一个Boxy对象 var box1 = new Boxy(“这个参数是显示内容” //显示内容 , { title: “标题”, //对话框标题 modal:...
  • jquery弹出层插件,支持消息提示、错误提示、确认框提示等。交互体验度非常好,大家都用微信支付、支付宝等完成用户体验度非常的不错。本插件至少要支持IE9+。使用方式也非常的简单、粗暴,很符合大众的jquery插件...
  • 可设置标题与内容弹出层js特效是一款jQuery弹出层插件制作可设置标题与内容弹框代码
  • 使用Jquery在页面中央,右下角弹出层。 注意:在没有滚动条时,弹出的层位置准确,如果有滚动条,则层位置不准确。在IE8测试下,在页面中央弹出后隐藏层时,会出现遗留边框,如果哪位可以解决此问题,希不吝赐教...
  • 弹出层永远是一个前端必须搞定东西,一般情况下,如果弹出层有固定高和宽,用样式即可搞定,但是如果碰到没有固定高或者固定宽或者固定高和宽时候,我们就需要用JS去处理,去动态获取当前窗口高或者宽;...
  • 这是一款基于jQuery鼠标经过方形图片切换成圆边特效代码,点击图片会弹出浮层,用户还可以自定义对应图片的标题与文字说明,适合图片页面展示,是一款非常实用图片特效源码。 运行效果图: ————————...
  • 适合做图片类网站的jQuery特效是一款鼠标经过图片滑动弹出标题效果代码
  • Bootstrap4 弹出

    2020-12-13 23:48:26
    注意: 弹出框要写在 jQuery 初始化代码里: 然后在指定元素上调用 popover() 方法。 以下实例可以在文档任何地方使用弹出框: 实例 $(document).ready(function(){ $('[data-toggle="popover"]'
  • 目录标题1. 说一下 jQuery 特点 1. 说一下 jQuery 特点 本质就是一个 js 文件,其中封装了很多 js 原生...比如渐变弹出,图层移动等动画效果,可以获得更好用户体验; 缺点: 缺点一个是太大,对一些比较小
  • Bootstrap 弹出

    2019-07-25 14:32:21
    注意: 弹出框要写在 jQuery 初始化代码里: 然后在指定元素上调用 popover() 方法。 1.1 基本弹出框 通过向元素添加 data-toggle=“popover” 来来创建弹出框。 title 属性内容为弹出的标题,data-content ...
  • 1.jQuery幻灯片按钮控制图片过渡特效 基于jQuery实现幻灯片按钮控制图片过渡特效...实现了点击后在原始页面上弹出想用页面的代码,此段代码广泛应用于各个网站各种页面内,非常实用。 在线演示 源码下载 4.jQuery
  • 本文实例为大家分享JavaScript弹出拖拽窗口具体实现代码,供大家参考,具体内容如下 需求说明:  1、点击页面按钮,弹出窗口;  2、要有半透明背景遮罩;  3、弹出窗口圆角,窗口半透明,但内容不透明;带阴影...

空空如也

空空如也

1 2 3 4
收藏数 72
精华内容 28
关键字:

弹出标题的jquery代码