ورود

View Full Version : مبتدی: چگونه از Smooth Div Scroll استفاده کنم؟


f_talebi
شنبه 19 مرداد 1392, 13:23 عصر
سلام . میخوام یه دایو اینجوری داشته باشم تو صفحه ام:
http://smoothdivscroll.com/runningTicker.html
کدش رو داده ولی نمیدونم چی اضافه کنم به css و سندم که یه دایو اینجوری داشته باشم ؟ اگه امکان داره یه نمونه برام بذارین

درضمن فکر کنم اینا رو هم باید اضافه کنیم به سند:
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.smoothdivscroll-1.3-min.js"></script>
meysam1366
شنبه 19 مرداد 1392, 18:34 عصر
سلام . میخوام یه دایو اینجوری داشته باشم تو صفحه ام:
http://smoothdivscroll.com/runningTicker.html
کدش رو داده ولی نمیدونم چی اضافه کنم به css و سندم که یه دایو اینجوری داشته باشم ؟ اگه امکان داره یه نمونه برام بذارین

درضمن فکر کنم اینا رو هم باید اضافه کنیم به سند:
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.smoothdivscroll-1.3-min.js"></script>

سلام دوست عزیز

این دایوشه



<div id="scrollingText"><div class="scrollingHotSpotLeft" style="display: none;"></div><div class="scrollingHotSpotRight" style="display: none;"></div><div class="scrollWrapper"><div class="scrollableArea" style="width: 4039px;">

<p>Latour A - </p><p>Latour B - </p><p>Lindab International - </p><p>Lundbergföretagen B - </p><p>Lundin Mining Corp. SDB - </p><p>Lundin Petroleum - </p><p>ABB Ltd - </p><p>Alfa Laval - </p><p>ASSA ABLOY B - </p><p>AstraZeneca - </p><p>Atlas Copco A - </p><p>Atlas Copco B - </p><p>Autoliv SDB - </p><p>Axfood - </p><p>Boliden - </p><p>Castellum - </p><p>Electrolux A - </p><p>Electrolux B - </p><p>Elekta B - </p><p>Ericsson A - </p><p>Ericsson B - </p><p>Fabege - </p><p>Getinge B - </p><p>Handelsbanken A - </p><p>Handelsbanken B - </p><p>Hennes &amp; Mauritz B - </p><p>Hexagon B - </p><p>Holmen A - </p><p>Holmen B - </p><p>Hufvudstaden A - </p><p>Hufvudstaden C - </p><p>Husqvarna A - </p><p>Husqvarna B - </p><p>Industrivärden A - </p><p>Industrivärden C - </p><p>Investor A - </p><p>Investor B - </p><p>JM - </p><p>Kinnevik A - </p><p>Kinnevik B - </p></div></div></div>>


کد css


#scrollingText div.scrollableArea p { display: block; float: left; margin: 0; padding-right: 7px; padding-top: 1px; font-family: Courier, Arial, Sans-Serif; font-size: 12px; line-height: 12px; font-weight: normal; background-color: #fff; color: #000; white-space: nowrap; }


و جی کوئری


// Mouse over $("#scrollingText").bind("mouseover", function(){ $("#scrollingText").smoothDivScroll("stopAutoScrolling"); }); // Mouse out $("#scrollingText").bind("mouseout", function(){ $("#scrollingText").smoothDivScroll("startAutoScrolling"); });
f_talebi
یک شنبه 20 مرداد 1392, 01:04 صبح
عذر میخوام این کار نمیکنه


<html>
<head>
<meta charset="utf-8">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.smoothdivscroll-1.3-min.js"></script>

<style type="text/css">
#scrollingText div.scrollableArea p{ display: block; float: left; margin: 0; padding-right: 7px;
padding-top: 1px; font-family: Courier, Arial, Sans-Serif;
font-size: 12px; line-height: 12px; font-weight: normal;
background-color: #fff; color: #000; white-space: nowrap; }
</style>

</head>

<body>

<div id="scrollingText">
<div class="scrollingHotSpotLeft" style="display: none;"></div>
<div class="scrollingHotSpotRight" style="display: none;"></div>
<div class="scrollWrapper">
<div class="scrollableArea" style="width: 4039px;">

<p>Latour A - </p><p>Latour B - </p><p>Lindab International - </p><p>Lundbergföretagen B -
</p><p>Lundin Mining Corp. SDB - </p><p>Lundin Petroleum - </p><p>ABB Ltd - </p><p>Alfa Laval -
</p><p>ASSA ABLOY B - </p><p>AstraZeneca - </p><p>Atlas Copco A - </p><p>Atlas Copco B -
</p><p>Autoliv SDB - </p><p>Axfood - </p><p>Boliden - </p><p>Castellum - </p><p>Electrolux A -
</p><p>Electrolux B - </p><p>Elekta B - </p><p>Ericsson A - </p><p>Ericsson B - </p><p>Fabege -
</p><p>Getinge B - </p><p>Handelsbanken A - </p><p>Handelsbanken B - </p><p>Hennes &amp; Mauritz B -
</p><p>Hexagon B - </p><p>Holmen A - </p><p>Holmen B - </p><p>Hufvudstaden A - </p><p>Hufvudstaden C -
</p><p>Husqvarna A - </p><p>Husqvarna B - </p><p>Industrivärden A - </p><p>Industrivärden C -
</p><p>Investor A - </p><p>Investor B - </p><p>JM - </p><p>Kinnevik A - </p><p>Kinnevik B - </p></div></div></div>

</body>
</html>

<script>
// Initialize the plugin with no custom options
$(document).ready(function () {
$("#scrollingText").bind("mouseover", function(){ $("#scrollingText").smoothDivScroll("stopAutoScrol ling"); }); // Mouse out $("#scrollingText").bind("mouseout", function(){ $("#scrollingText").smoothDivScroll("startAutoScro lling"); });

});
</script>